Glassmorphism & Neumorphism
Design frosted-glass and soft-shadow neumorphic panels with backdrop-blur. Copy production-ready CSS.
background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 20px;
About the Glassmorphism Generator
The Glassmorphism Generator builds CSS for two panel styles: frosted glass and neumorphism. Frosted glass is the translucent, blurred card that floats over a colorful background; neumorphism is the soft, extruded look where a shape appears pressed out of its own surface. Both rely on values that are tedious to guess by hand, so this tool lets you drag sliders, watch a live preview, and copy the exact rules.
Switch between the Glassmorphism and Neumorphism tabs at the top. In glass mode you set a tint color and opacity, a blur up to 40px, a saturate value from 50 to 300 percent, a border alpha, and a radius. The tool assembles background, backdrop-filter, its -webkit- prefix, a border, and border-radius. In neuro mode you pick a surface color and set distance, blur, and radius, and it computes two matching box-shadows.
The frosted-glass preview and its CSS are generated live in the browser, free and with no signup. Nothing you type is uploaded: the CSS is generated in JavaScript on the page, and the Copy CSS button writes it straight to your clipboard. The preview updates as you move each slider, so you see the frosted card over a sample gradient, or the neumorphic block on its surface, before pasting a single line into your stylesheet.
How to use the Glassmorphism Generator
- 1Choose the Glassmorphism or Neumorphism tab for the effect you want.
- 2In glass mode, pick a Tint color, set its Tint opacity, then adjust Blur and Saturate.
- 3Set Border alpha and Radius to control the panel's edge and corners.
- 4In neuro mode, pick a Surface color and adjust the Distance, Blur, and Radius sliders.
- 5Watch the live preview panel update with each change.
- 6Click Copy CSS to send the generated rule to your clipboard.
What you can use it for
Frosted navbar over a hero
You have a photo or gradient hero and want a sticky nav bar that reads through it. Set a white tint at low opacity, push blur near 14px, and drop the backdrop-filter rule on your header so content behind stays visible but softened.
Soft dashboard cards
For a light dashboard, neuro mode gives tiles that look molded from the background. Match the Surface color to your page background, keep distance small for subtle depth, and paste the two-shadow rule onto each card.
Matching a design spec
A designer hands you a Figma frame with a specific blur and radius. Drag the sliders to those numbers, confirm the preview matches, and copy exact values instead of eyeballing backdrop-filter and border-radius in your editor.
How the two effects are built
The glass effect leans on backdrop-filter: blur() saturate(). Unlike a normal filter, which affects the element itself, backdrop-filter samples the pixels behind the element and blurs and saturates them. That is why a translucent fill matters: the rgba tint sits on top of the blurred backdrop, and low opacity lets the softened content show through. Saturate above 100 percent deepens the colors bleeding through, giving frosted glass its slight glow.
Neumorphism fakes depth with two shadows pointing opposite ways. The tool takes your single surface color, generates a slightly darker and slightly lighter version, and places the dark one at positive offsets (down and right) and the light one at negative offsets (up and left). Because the element and page share the same base color, the shape reads as pushed out of the surface. Distance sets the offset, blur softens the falloff, and radius rounds the form.
Frequently asked questions
Does this tool upload anything or store my settings?
No. It is a client-side page. Every value stays in the browser tab, the CSS is built in JavaScript on your machine, and Copy CSS uses your clipboard directly. There is no account and no server call, so refreshing the page resets the sliders to their defaults.
Why does the border stay white when I change the tint?
In glass mode the tint color and opacity control only the panel's fill. The border is always a white rgba value, and the Border alpha slider changes only its transparency, not its hue. If you need a colored border, edit the border line after copying the CSS.
Why does the glass preview only look right over a background?
backdrop-filter blurs whatever sits behind the element, so a glass panel over a flat color shows little effect. The preview places the card over a sample gradient for this reason. When you paste the CSS, put the panel above an image, gradient, or busy content.
How are the two neumorphism shadows chosen?
You pick one Surface color. The tool derives a darker and a lighter shade from it for the bottom-right and top-left shadows, which creates the extruded look. You control only distance, blur, and radius, so keep the surface close to your page background.
Will the CSS work in every browser?
The glass rule includes both backdrop-filter and its -webkit- prefix, covering current Chrome, Edge, Safari, and Firefox. Very old browsers ignore backdrop-filter and show the flat tint without blur. The neumorphism rule uses only box-shadow and border-radius, which are supported broadly and degrade more gracefully.