CSS Glassmorphism & Neumorphism Generator
Create a frosted-glass card (glassmorphism) or a soft raised/pressed UI element (neumorphism) and tune it with sliders while you watch the preview. Glass uses backdrop-filter blur and saturation; neumorphism uses a light and a dark box-shadow. Switch between gradient backgrounds to see how the glass reads over different colors. For hand-tuned plain shadows, try the CSS Box-Shadow Generator.
🔒 Runs in your browser · Your data is never sent to a server
Preview
How to use
- Choose Glassmorphism or Neumorphism mode.
- Pick a material preset, then adjust blur, opacity, and shadow strength with the sliders.
- For glass, switch the preview background to check how it looks over different colors.
- Copy the generated CSS and paste it into your stylesheet.
Notes
- `backdrop-filter` only has a visible effect when something is painted behind the element. Over a flat solid color you will barely see the blur.
- The output includes `-webkit-backdrop-filter` for older Safari. In browsers without support, only the translucent background applies.
- For neumorphism, the parent background must use the same base color as the element or the shadows look off. Near-white and near-black colors leave little room for light/dark shades.
- Neumorphic UI tends to have low contrast, so check that text and buttons remain readable and accessible.
- The preview backgrounds are CSS gradients only; no external images are loaded.
Glossary
Glassmorphism
A UI style that mimics frosted glass using a translucent background and a blurred backdrop, usually with a thin light border.
Neumorphism
A UI style where an element shares its background color and uses a light and a dark shadow to look extruded from, or pressed into, the surface.
backdrop-filter
A CSS property that applies filters such as blur or saturate to whatever is rendered behind an element, without affecting the element itself.
inset shadow
Adding `inset` to `box-shadow` draws the shadow inside the element, giving a pressed-in look. Used for the "Pressed" neumorphic shape.
FAQ
Why can I not see the blur in my glass card?
backdrop-filter blurs whatever is behind the element. Over a flat solid color the blur changes nothing visible. Place it over an image, gradient, or other content to see the effect.
Which browsers support backdrop-filter?
All current major browsers do. Older Safari needs the -webkit- prefix, so the generated CSS includes both. Where it is unsupported, only the translucent background applies.
My neumorphic shadows look wrong. What is happening?
The element and its parent must share the same base color. Colors close to white or black leave little room for lighter and darker shades, so a mid-tone base works better.
What should I watch out for with neumorphism?
The contrast between the element and the background is low, so buttons and inputs can be hard to distinguish. Add text color or borders as needed and check readability.
Share this page