Skip to content
OneTooling

CSS Glassmorphism & Neumorphism Generator

Make glassmorphism and neumorphism CSS with a live preview. Tune blur, transparency, shadows and shape, then copy the code. Runs in your browser.

Runs in your browser · nothing uploaded
Style
12px
75%
160%
20px
30%
Preview background

The blur only shows when something colorful sits behind the card. backdrop-filter works in all current browsers; older ones show the plain tint instead.

CSS

background: rgba(255, 255, 255, 0.25);
border-radius: 20px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.3);

Why is there an ad? This tool is free and runs on your device. One small ad pays for hosting and new tools. No pop-ups, no autoplay, never inside the tool. How we make money

How to make glass or soft UI CSS

  1. Choose Glassmorphism or Neumorphism at the top.
  2. Move the sliders and watch the preview. For glass, try another preview background to see how it looks over different colors.
  3. Press Copy CSS and paste it into your stylesheet.

For glass, a blur of 10 to 20 pixels with 60 to 80 percent transparency is a good start. For soft UI, use a light surface color, pick the light source you prefer, and keep the element and the page the same color.

Questions

Is anything uploaded or saved?

No. The preview and the CSS are made by your browser. Nothing is sent to a server or stored.

Why does my glass card look flat?

The blur only blurs what is behind the card. Place it over an image, a gradient, or colorful shapes. On a plain white page it looks like a faint white box.

Does backdrop-filter work in every browser?

It works in all current versions of Chrome, Edge, Safari, and Firefox. The copied CSS includes the -webkit- prefix for older Safari. If a browser cannot blur, the card shows the semi-transparent tint, which is a fine fallback.

What do concave, convex, and pressed mean in soft UI?

Flat is a simple raised surface. Concave curves inward and convex bulges outward, using a gentle gradient. Pressed flips the shadows to the inside, like a button that is held down.

Are soft UI shadows accessible?

Soft UI has low contrast by design, so edges can be hard to see for some people. Add a clear text label, a visible focus ring, and enough color contrast for text before you use it on real buttons or form fields.

Credits

Built by OneTooling using standard browser features. No third-party code runs on your data.

More tools

Color Converter & Contrast CheckerColor Palette GeneratorCSS Gradient GeneratorCSS Box Shadow GeneratorSVG Optimizer