Glassmorphism is the frosted panel look: a card that blurs whatever is behind it instead of covering it, so the background still reads as present.
Nexter Blocks builds it with a backdrop filter, set from the Advanced tab of any block.
Before You Start
- Edition: Pro — the glassmorphism effect needs Nexter Blocks Pro.
- Block to enable: any Nexter block, switched on under Nexter > Blocks in your WordPress dashboard.
- This is an Advanced tab option, so it is available on Nexter blocks generally rather than being a block of its own. Open any Nexter block and look under Advanced.
- Something behind the block worth blurring. Over a flat colour the effect is invisible — it needs an image or a gradient.
Steps
- Place your block over an image or gradient background — see the Container block guide.
- Open the block’s Advanced tab and find the glassmorphism option.
- Switch it on and set a blur value. This is the setting that does the work.
- Add saturation if you want the colours behind to stay vivid through the blur.
- Give the block a semi-transparent background colour, then publish.
How It Behaves
The option is compiled into a CSS rule scoped to that one block.
- Measured from the plugin’s own CSS generator with blur 8 and saturate 180: the block received
backdrop-filter: blur(8px) saturate(180%)together with the-webkit-prefixed form. - Setting the toggle alone does nothing. Measured: with the option switched on but every value left blank, the generated CSS contained no rule at all. Give it at least one value. Measured: with the toggle on and blur, saturation and the rest all left empty, no
backdrop-filterwas produced at all. - Backdrop filter blurs what is behind, not the block itself. The block’s own text stays sharp — that is the whole point, and it is what separates this from a plain blur.
- The block needs some transparency. A fully opaque background hides the blurred layer completely, which is the usual reason nothing appears to happen.
- Measured with Nexter Blocks Pro deactivated: the effect disappears entirely and the block renders as though the option had never been set.
Limitations
- Pro only — measured with Nexter Blocks Pro deactivated, the generator produced no filter rule whatsoever.
- Invisible over a flat colour. There has to be detail behind the block for the blur to show.
- It costs real rendering work. Backdrop filters are among the more expensive CSS effects, especially on a large area or on older phones. Use it on a card, not a full-page section.
- Contrast is easy to lose. Text on frosted glass over a busy photo can fail accessibility contrast even when it looks acceptable to you.
- Older browsers ignore it and show your background colour instead, so choose one that stands on its own.
Troubleshooting
Nothing looks any different
Three usual causes: no value is set (the toggle alone produces nothing, measured), the block’s background is fully opaque, or there is nothing behind it to blur.
The block’s own text is blurred
That is the ordinary filter, not the backdrop one. Backdrop blurs what is behind — check which of the two options you set.
It works on desktop but not on my phone
Some mobile browsers drop backdrop filters to save battery. Make sure the fallback background colour looks right on its own.
The page feels slow when I scroll
Backdrop filter is expensive to redraw. Reduce the blurred area or the blur radius.
