Glassmorphism & Neumorphism CSS Generator
Design frosted-glass or soft-UI surfaces with live controls and copy the CSS for either style.
UI Element
Two popular UI looks in one tool. Switch between Glassmorphism — the frosted, semi-transparent panel that blurs whatever sits behind it — and Neumorphism — the soft, extruded “soft-UI” surface built from twin light and dark shadows. Adjust the controls, watch a live preview update against a patterned background, and copy the CSS for whichever style you settle on. It runs entirely in your browser.
Glassmorphism controls
The glass mode centres on backdrop-filter: blur() over a translucent fill. You set the tint colour and its opacity (0–100%), the blur strength (0–40px), the border, the corner radius and the drop shadow. Because the effect depends on backdrop-filter, remember two things: the panel needs something behind it to blur (a plain colour shows almost no effect), and older browsers may need the -webkit-backdrop-filter prefix, which is worth adding for wider support.
Neumorphism controls
Neumorphism is an illusion made from two shadows of the same hue — a lighter one and a darker one — cast in opposite directions from a single light source. You choose the surface colour, the shadow distance and blur, and the light direction, plus a shape: flat, pressed (inset), convex or concave. The tool derives the two shadow colours automatically by lightening and darkening your base colour, which is why the effect works best when the element and its page background are the same colour.
Frequently Asked Questions
Why does my glassmorphism panel look solid?
The frosted effect comes from backdrop-filter blurring whatever is behind the panel. If there is nothing textured or colourful behind it, there is little to blur. Place it over an image or gradient to see the effect.
Do I need a browser prefix for the glass effect?
Some browsers (notably older Safari) require -webkit-backdrop-filter alongside the standard backdrop-filter. Add the prefixed line in your own CSS if you need to support them.
Why should the neumorphic element match its background?
Neumorphism fakes a raised or pressed surface using light and dark shadows on the same colour. The illusion only holds if the element and the page behind it share that colour, so it looks moulded from one material.
What do the flat, pressed, convex and concave shapes do?
They change how the light and shadow are arranged: flat sits level, pressed uses inset shadows so it looks pushed in, and convex/concave subtly bulge out or dip in using gradients.