Two things are needed before frosted glass shows
backdrop-filter blurs or saturates what lies behind the element rather than the element itself. If its own background is fully opaque the blurred backdrop is hidden and nothing appears to change, and with nothing behind it there is nothing to blur. This generator writes the semi-transparent background and the filter functions as one block.
The prefixed property is written too
Safari recognized only -webkit-backdrop-filter for a long time, so the standard and prefixed properties are printed side by side with the same value. The results also state which of the two the browser you are using supports. Property syntax follows the W3C Filter Effects specification (as of October 2026).
What it does not do
It does not write filter, which affects the element itself; the two properties target different things and have separate tools. It does not recommend a pleasing blur or opacity either, and builds the code only from your values. The effect is expensive, so check large areas on real devices.
Frequently Asked Questions
That happens when the element background is opaque or nothing sits behind it. Keep the background semi-transparent and put an image or color behind it.
Safari recognized only the prefixed property for a long time. Writing both lines with the same value works in browsers that support either one.
filter affects the element itself while backdrop-filter affects what is behind it. They target different things, so one does not produce the effect of the other.