To achieve the frosted glass effect, using the backdrop-filter property of CSS is the most direct way. 1. Set a translucent background color to the element, such as rgba; 2. Add backdrop-filter and set the blur value to achieve blur; 3. It is recommended to add -webkit-backdrop-filter to be compatible with Safari; 4. Make sure the parent container has actual content or background, otherwise the blur effect will not be visible. Notes include: performance overhead is high, especially on mobile terminals, overuse should be avoided; old versions of IE do not support, Safari needs to be prefixed; multiple filters can be combined to enhance visual effects, such as applying blur and saturation adjustments at the same time.

To add a blurred and transparent effect similar to frosted glass to the elements, using CSS backdrop-filter is the most direct way. This property allows you to apply graphic effects to the area behind the elements, such as Gaussian blur, color adjustment, etc. The common application scenario is to create the visual style of translucent frosted glass.

What is backdrop-filter?

backdrop-filter is not the same as ordinary filter . A normal filter acts on the element itself, while backdrop-filter acts on the content behind the element. That is to say, you can only see the effect of the filter when the element is translucent or has transparent areas.

For example: If you add backdrop-filter: blur(10px) to a white opaque div, you won't see any changes because the content behind it is completely blocked. But if you set this div to be translucent (for example, background-color: rgba(255,255,255,0.5) ), you can see that the content behind it is blurred.

How to write a basic frosted glass effect?

To achieve a frosted glass effect, the following steps are usually required:

• Set the background to the container to translucent color
• Add backdrop-filter attribute and set blur value
• Can be compatible with -webkit-backdrop-filter
• Note that the parent must have actual content or background, otherwise the effect will not be visible.

The sample code is as follows:

 .glass {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* compatible with Safari */
  padding: 20px;
}

The HTML structure is roughly like this:

 <div class="background-image">
  <div class="glass">This is the text of frosted glass effect</div>
</div>

Make sure that the .background-image layer has content or background image, otherwise you will not see the blur effect.

Frequently Asked Questions and Notes

There are several pitfalls to note when using backdrop-filter :

• Performance issues : blur() operation is relatively performance-consuming, especially on the mobile side, the larger the fuzzy value, the more obvious it is. It is recommended not to overuse, or to control the fuzzy range.
• Browser compatibility : Mainstream modern browsers support it, but don’t think about it like old versions of IE. Safari needs to add -webkit- prefix to ensure a little bit of insurance.
• Hierarchy problem : If the parent of an element has no actual content or background, backdrop-filter has nothing to "filter", and naturally there is no effect to see.
• Combination filter : You can add multiple effects at the same time, such as blur hue adjustment:

 backdrop-filter: blur(8px) saturate(1.5);

This allows blur while slightly changing the color texture, making it look closer to the real frosted glass.

Basically that's it. This thing is not complicated, but it is easy to ignore details, such as transparency, whether the parent content exists, and performance impact. If used just right, the UI will look more layered.

The above is the detailed content of Applying backdrop filters for effects like frosted glass with css. For more information, please follow other related articles on the PHP Chinese website!