DEV Community: Fábio Leal

How to Create the "Apple Liquid Glass" Effect with CSS and SVG

Fábio Leal — Wed, 29 Oct 2025 18:58:55 +0000

If you've been searching for the "Apple Liquid Glass" style, you're in the right place. You may already be familiar with traditional "glassmorphism," the popular design trend that uses backdrop-filter: blur() to create a frosted glass look.This article introduces the "Apple Liquid Glass" technique, a new way to achieve a more realistic and dynamic result. We'll break down how to create its signature rippling distortion using a clever combination of layered HTML elements, CSS, and a powerful SVG filter. We'll be referencing the code from the "Glassmorphism Music Player" example.

The Core Concept: Stacking Layers

The entire effect relies on stacking four distinct layers on top of each other using CSS positioning and z-index.

Imagine it like a sandwich:

Content (Top Layer, z-index: 3) - Your text, images, and buttons.
Specular Highlight (Middle Layer, z-index: 2) - A subtle inner border to catch the "light."
Glass Overlay (Middle Layer, z-index: 1) - The semi-transparent background color.
Filter Layer (Bottom Layer, z-index: 0) - The magic layer that distorts everything behind it.
The HTML Structure

First, you need a container for all these layers. Inside, you'll have the layers themselves, plus a final element for your actual content.

<!-- The main container -->
<div class="glass-container">

  <!-- Layer 4: The Distortion Filter -->
  <div class="glass-filter"></div>

  <!-- Layer 3: The Semi-Transparent Background -->
  <div class="glass-overlay"></div>

  <!-- Layer 2: The "Light" Highlight -->
  <div class="glass-specular"></div>

  <!-- Layer 1: Your Content -->
  <div class="glass-content">
    <!-- Your player, text, etc. goes here -->
  </div>

</div>

<!-- 
  The SVG Filter Definition 
  (Place this anywhere in your HTML, 
  often at the bottom of the <body>)
-->
<svg style="display: none">
  <filter id="lg-dist" x="0%" y="0%" width="100%" height="100%">
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.008 0.008"
      numOctaves="2"
      seed="92"
      result="noise"
    />
    <feGaussianBlur in="noise" stdDeviation="2" result="blurred" />
    <feDisplacementMap
      in="SourceGraphic"
      in2="blurred"
      scale="70"
      xChannelSelector="R"
      yChannelSelector="G"
    />
  </filter>
</svg>

The CSS Layers

Now, let's style those layers. The key is to use position: absolute and inset: 0 to make them all fill the .glass-container perfectly, then control their stacking with z-index.

/* The main container holds all the layers 
*/
.glass-container {
  position: relative;
  border-radius: 1rem; /* Or any border-radius you want */
  overflow: hidden;    /* Crucial to contain the effect */
}

/* Layer 4: The Distortion Filter */
.glass-filter {
  position: absolute;
  inset: 0;
  z-index: 0;

  /* This is the key! We set blur(0px) to enable backdrop-filter,
    but use our custom SVG filter for the *actual* effect.
  */
  backdrop-filter: blur(0px); 
  filter: url(#lg-dist); /* This points to our SVG filter's ID */

  /* Fixes stacking context issues in some browsers */
  isolation: isolate; 
}

/* Layer 3: The Semi-Transparent Background */
.glass-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.25); /* Your glass color */
}

/* Layer 2: The "Light" Highlight */
.glass-specular {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit; /* Matches the parent's border-radius */
  overflow: hidden;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 0 5px rgba(255, 255, 255, 0.75);
}

/* Layer 1: Your Content */
.glass-content {
  position: relative; /* Sits normally on top */
  z-index: 3;
  padding: 1rem; /* Give your content some space */
}

The Magic: Breaking Down the SVG Filter

The real star of the "Apple Liquid Glass" effect is the . It works in three steps:

: This creates a "noise" pattern, like static on an old TV. We use type="fractalNoise" to make it look more natural and organic.
: The raw noise is too sharp. We apply a simple blur to it, which makes the noise "clump" together into softer, blob-like shapes.
: This is the mind-bending part. It takes the blurred noise pattern and uses it as a map to distort the original content (in="SourceGraphic"). The scale="70" attribute controls how intense the ripple effect is.

And that's it! By combining these CSS layers with the power of SVG filters, you move beyond simple blurring and create a truly unique and dynamic "Apple Liquid Glass" effect.

Browser Compatibility

This effect relies on two key technologies, and their support is very good, but not universal.

SVG Filters (feTurbulence, etc.): This is the core of the "liquid" look. SVG filters are widely supported across all modern browsers, including Chrome, Firefox, Safari, and Edge. You can use this part of the effect with high confidence.
backdrop-filter: This is what allows the element to distort the content behind it.Supported: Safari (all versions), Chrome, Edge, and Firefox (v103+).Not Supported: Internet Explorer.

In summary: The effect will work perfectly for the vast majority of users on modern browsers. For browsers that don't support backdrop-filter, the "liquid" distortion won't apply to the background image, but the element will still have its semi-transparent background and specular highlight, gracefully degrading to a simpler glassmorphism effect.

Mastering Regular Expressions: A Semantic Approach to Regex

Fábio Leal — Sun, 29 Sep 2024 10:13:41 +0000

Regular expressions (regex) can often seem like a mysterious art form. But once you grasp the core concepts, regex becomes a powerful tool to solve problems like data validation, extraction, and transformation. In this article, I’ll guide you through a structured approach to mastering regex, helping you understand it from a semantic perspective.

What is Regex? 🤔

Regex is a sequence of characters that define a search pattern. This pattern is used to find, extract, or replace parts of strings. Here’s an example:

^\s{2}title: "\\\'"

This regex matches strings that start with two spaces followed by the literal string "title: "'\". Regex is more than just matching—it allows you to define patterns for structured text search."

Step-by-Step Path to Regex Mastery 🚀

1. Learn the Basics

Before diving into complex regex patterns, start with these basic building blocks:

Literals: Matches exact text. For example, abc matches "abc".
Meta-characters: These are special characters like ., *, +, and ?. Each has a unique meaning. For example, . matches any character except a newline.
Anchors: Use ^ to match the start of a string or line, and $ to match the end.
Character Classes: Define sets of characters using square brackets, like [a-z] to match any lowercase letter.
Quantifiers: These specify the number of occurrences to match. For example, a{2,} matches "aa" or more.

Example

In the example below, this regex validates email addresses:

^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$

It matches a string like test@example.com:

2. Understand Grouping and Capturing 🎯

Regex groups let you organize parts of your pattern and capture values for reuse. This makes regex more powerful for string transformations.

Groups: Use parentheses () to group parts of your regex. For example, (abc) captures "abc".
Non-Capturing Groups: Use (?:abc) if you don't need to capture a group but want to organize your regex.

Example:

Here’s a regex for extracting the date from a log line like 2024-09-29 Log entry:

(\d{4})-(\d{2})-(\d{2})

This pattern captures the year, month, and day in separate groups, which can be useful for further processing:

3. Master Lookaheads and Lookbehinds 🔍

Lookaheads and lookbehinds are zero-width assertions that allow you to match a pattern based on what comes before or after it, without actually consuming those characters. This is powerful when you want to ensure a pattern is followed by or preceded by something.

Lookahead: (?=...) matches only if something is followed by a specific pattern.
Lookbehind: (?<=...) matches only if something is preceded by a specific pattern.

Example:

To match the word "car" only if it is followed by "park", you would use:

car(?=park)

This matches "car" in "carpark" but not in "carpet":

4. Practice Common Use Cases 🛠

By practicing, you'll get more comfortable with how to apply regex in real-world scenarios. Start with these common use cases:

4.1. Validating Input 📝

Create patterns to ensure data matches certain formats, like phone numbers, emails, or URLs.

Phone number validation:

  ^\(\d{3}\) \d{3}-\d{4}$

URL validation:

  https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)?

4.2. Extracting Data 📄

Regex is fantastic for extracting specific parts of text. Here’s an example for extracting prices from a string like Total cost: $45.99:

\$\d+\.\d{2}

It matches any currency amount in the format $XX.XX.

5. Apply Regex in Code 💻

Once you’re comfortable with regex syntax, start applying it in your programming environment. Here’s how you can use regex in different languages:

5.1. JavaScript Example

In JavaScript, regex can be used with the RegExp object:

let regex = /^\d{3}-\d{2}-\d{4}$/;
console.log(regex.test("123-45-6789")); // true

5.2. Python Example

Python’s re module makes working with regex very straightforward:

import re
pattern = r'^\d{3}-\d{2}-\d{4}$'
result = re.match(pattern, '123-45-6789')

You can also integrate regex into your React projects for form validation, data parsing, and more.

6. Explore Advanced Techniques 🧠

Once you're comfortable with the basics, you can start exploring advanced regex techniques:

Backreferences: Reuse matched groups later in the pattern. For example, (a)\1 matches "aa".
Named Capturing Groups: Add meaning to your capture groups by naming them.

  (?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})

Atomic Groups: Prevent backtracking in specific cases to improve performance with (?>...).

7. Resources for Deep Learning 📚

To truly master regex, you’ll need to learn continuously. Here are some key resources:

Regex101 (regex101.com): Interactive regex tester with real-time explanation.
RegExr (regexr.com): Visual regex builder with examples.
Mastering Regular Expressions by Jeffrey Friedl: The go-to book for regex mastery.

8. Engage with the Community 👩‍💻👨‍💻

Regex is often best learned through practice and collaboration. Engage with the community to solve problems and get feedback:

Stack Overflow: There’s always someone asking interesting regex questions.
LeetCode and Codewars: Try regex-based coding challenges.
DEV: Yes, here! We have great contents, articles, tutorials about regex.

Conclusion 🎉

Mastering regex requires both learning the theory and applying it in practical contexts. By following this semantic approach, you’ll gain confidence in crafting powerful patterns for a variety of tasks. From a basic validation to an advanced text extraction, regex will become an indispensable part of your toolkit.

Are you ready to conquer regex? 🚀

Feel free to add your favorite regex tips or use cases in the comments below!

How to Create Separate Partitions for Boot, Root, Home, and Swap on Pop!_OS (Updated)

Fábio Leal — Fri, 22 Dec 2023 14:05:39 +0000

An important aspect of system management in the world of Linux is the organization of directories. A common practice among Linux users and experienced professionals is to isolate certain directories from the rest of the operating system. This approach, while not mandatory, can provide many benefits that enhance the overall experience of using and maintaining a Linux system.

One such directory that is often isolated is the /home directory. Separating the /home directory from the rest of the operating system has many advantages. For example, it simplifies major upgrades. This is because you can install a new or different Linux distribution without losing most of your personal files and user-specific settings.

Also, it allows more efficient management of disk space. You can increase or decrease the size of the home partition and the root partition independently without affecting the layout of the other, simplifying maintenance. If your root directory (/) becomes full, it can severely impact system performance. Having a separate /home partition helps keep your root directory as empty as possible.

Here's a step-by-step guide on how to create separate partitions for the EFI System Partition (ESP), / (root), /home, and swap on Pop!_OS.

Please note that this process will erase all data on the drive you're partitioning, so make sure to back up any important data before proceeding.

Step-by-Step Guide

1. Boot into Pop!_OS Live Disk

Restart your computer and boot from the Pop!_OS installation media (USB/DVD). Choose 'Try Demo Mode' when prompted.

2. Open GParted

Once you're in the live environment, open GParted. It's a powerful tool for managing partitions.

3. Select the Correct Drive

In GParted, make sure you've selected the correct drive from the dropdown in the top-right corner.

4. Create a New Partition Table

From the 'Device' menu, select 'Create Partition Table'. Choose 'gpt' (GUID Partition Table) for modern UEFI systems (which is the standard) or 'msdos' for older, legacy BIOS systems.

5. Create the EFI System Partition (ESP) - The Boot Partition

This partition is required for Pop!_OS to boot via UEFI.

Click on the unallocated space and select 'New'.
Enter 512 in the 'New size (MiB)' field to create a 512 MiB partition.
Under 'File system', select 'fat32'.
Click 'Add'.

6. Create the `/` (Root) Partition

Repeat the process to create the root partition.

The size depends on your needs, but 40GB to 60GB is a safer minimum now to comfortably accommodate system files and installed applications.
Select 'ext4' as the file system.

7. Create the `/home` Partition

Repeat the process to create the home partition.

You can use the rest of the available space for this partition.
Select 'ext4' as the file system.

8. Create the `swap` Partition (Optional)

If you want to create a dedicated swap partition, repeat the process one more time.

The size should be equal to your RAM if you intend to use hibernation, or 4GB to 8GB for general use on systems with more than 8GB of RAM.
Note: Pop!_OS uses a flexible **swap file* by default if you choose not to create a dedicated partition, which is often a simpler option.*

9. Apply Changes

Click on the green checkmark to apply the changes. This will format the drive and create the partitions.

10. Install Pop!_OS

Close GParted and open the Pop!_OS installer. When you get to the partitioning section, choose 'Custom (Advanced)'.

Assign the mount points: Assign the mount points (/, /home) to the corresponding ext4 partitions.
Designate Boot: Set the FAT32 partition (512 MiB) as the EFI System Partition.
Set Swap: Set the swap partition's usage type to 'swap' (it does not get a mount point).

Please note that these steps are quite technical and a mistake could result in data loss. If you're not comfortable doing this yourself, consider seeking help from a professional.

Good luck! 😊

DEV Community: Fábio Leal

How to Create the "Apple Liquid Glass" Effect with CSS and SVG

Mastering Regular Expressions: A Semantic Approach to Regex

What is Regex? 🤔

Step-by-Step Path to Regex Mastery 🚀

1. Learn the Basics

Example

2. Understand Grouping and Capturing 🎯

Example:

3. Master Lookaheads and Lookbehinds 🔍

Example:

4. Practice Common Use Cases 🛠

4.1. Validating Input 📝

4.2. Extracting Data 📄

5. Apply Regex in Code 💻

5.1. JavaScript Example

5.2. Python Example

6. Explore Advanced Techniques 🧠

7. Resources for Deep Learning 📚

8. Engage with the Community 👩‍💻👨‍💻

Conclusion 🎉

How to Create Separate Partitions for Boot, Root, Home, and Swap on Pop!_OS (Updated)

Step-by-Step Guide

1. Boot into Pop!_OS Live Disk

2. Open GParted

3. Select the Correct Drive

4. Create a New Partition Table

5. Create the EFI System Partition (ESP) - The Boot Partition

6. Create the / (Root) Partition

7. Create the /home Partition

8. Create the swap Partition (Optional)

9. Apply Changes

10. Install Pop!_OS

6. Create the `/` (Root) Partition

7. Create the `/home` Partition

8. Create the `swap` Partition (Optional)