Interactive CSS playground
CSS effect generator.
Design glassmorphism effects and box shadows with an interactive live preview. Fine-tune every parameter with sliders, choose from presets, and copy production-ready CSS code.
CSS playground
Presets
Background Tint (RGB)
Live Preview
✨
Glass Card
Adjust the sliders to customise the effect. Copy the CSS when you're happy.
CSS Code
background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.18);
Glassmorphism Tips
- •Works best over colourful or photographic backgrounds
- •Keep opacity low (0.05–0.25) for a true frosted look
- •Safari requires the
-webkit-prefix for backdrop-filter
How the playground works
Glassmorphism
Craft frosted glass effects with full control over backdrop blur, opacity, saturation, border radius, and background tint.
Box shadows
Design elevated, hard-edge, or inner-glow shadows with adjustable offset, blur, spread, and colour opacity controls.
Instant CSS
Copy production-ready CSS with one click. Includes vendor prefixes for Safari's -webkit-backdrop-filter where applicable.
How to use it
Getting a useful result.
- Choose the effect you want, then adjust the controls and watch the preview rather than the numbers.
- Copy the generated CSS and paste it into your stylesheet, or into the custom-CSS box your theme or page builder provides.
- Check it against a real background. A glass or shadow effect that looks convincing on one colour often disappears on another.
- Look at it on a phone before you keep it. Heavy blurs and large shadows are the two effects most likely to cost noticeable performance on mid-range hardware.
Two properties do most of the work in a modern interface. A gradient gives a flat block somewhere to catch light, and a shadow tells the eye which layer is on top. Used sparingly they read as depth; used everywhere they read as noise, and the fastest way to make a page feel cheap is to give every element its own glow.
There is a performance rule worth knowing: animating a shadow forces the browser to repaint on every frame, which is why the smooth version is to fade the opacity of a pseudo-element that already carries the shadow. Blur is the other expensive one — a large backdrop-filter is genuinely costly on cheaper phones.
Common questions
Where do I paste this CSS?
Into your site's stylesheet, or into the Additional CSS field that most themes and page builders provide. Prefer that field over editing a theme file directly, because a theme update will overwrite the file and leave you wondering what broke.
Do these effects slow a site down?
Gradients and static shadows are effectively free. Large blurs are not, and animated shadows are the worst case because they force a repaint every frame. If a page feels sluggish while scrolling, blur and shadow animation are the first two things to remove.
Why does my glass effect look flat?
Because there is nothing behind it. Frosted glass only reads as glass when something textured or colourful is visible through it — over a flat background it is just a slightly different flat panel, and the blur is being paid for with nothing to show.
An effect is the easy part; making it hold up on a real page at 320 pixels wide is the job — web development.