--- title: "How to Add Glassmorphism Effect in WordPress?" url: https://nexterwp.com/docs/add-glassmorphism-effect-in-wordpress/ date: 2025-07-16 modified: 2026-09-21 lang: en author: "Aditya Sharma" description: "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..." image: https://nexterwp.com/wp-content/uploads/2025/07/Glassmorphism-featured-image-1024x538.jpg word_count: 587 --- # How to Add Glassmorphism Effect in WordPress? ## Key Takeaways - Nexter Blocks builds the glassmorphism effect with a backdrop filter from the Advanced tab of any Nexter block, and it needs Nexter Blocks Pro. - Glassmorphism needs detail behind the block, such as an image or gradient, because over a flat colour the blur is invisible. - The generated CSS is scoped to one block and appears only when at least one value is set, with a measured example of backdrop-filter: blur(8px) saturate(180%) and the -webkit- prefixed form. 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. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/extras/wordpress-glassmorphism-effects/) ## 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](https://nexterwp.com/docs/add-a-container-in-wordpress/). - 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-filter` was 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. ## Related Docs - [Add a transform effect in WordPress](https://nexterwp.com/docs/add-a-transform-effect-in-wordpress/)- [Add on scroll animation in WordPress](https://nexterwp.com/docs/add-on-scroll-animation-in-wordpress/)- [Add a container in WordPress](https://nexterwp.com/docs/add-a-container-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)