UtilibyWritten by the Utiliby editorial team · Last updated October 15, 2026 · Rules and formulas reviewed October 2026
What this free online glassmorphism CSS generator does
Few interface styles have spread as quickly as glassmorphism: the frosted-glass look of translucent panels floating above colourful shapes. It appears in dashboards, music players, weather apps, login screens, pricing cards and operating system menus, and it is easy to get wrong. A background that is too opaque hides the blur, too much blur makes a mush, and low contrast makes text unreadable. This free online glassmorphism CSS generator lets you shape the effect with live controls and copy clean, production-ready code.
Adjust transparency, blur, saturation, brightness, border, radius, shadow and an inner highlight, try the glass as a card, a navigation bar, a button or a login panel, and watch it over an animated background of drifting shapes, a set of gradients, your own colours or even your own photo. An estimated contrast readout warns you when text will be hard to read, seven style presets give you a head start, and the code comes out as CSS, Tailwind classes, a full HTML page or a React style object.
How to create a glassmorphism effect
- Pick a style. Start from Classic frost, Clear glass, Dark smoke, Violet tint, Liquid glass, Heavy frost or Neon edge, or adjust the sliders yourself.
- Set transparency and blur. Around 15 to 25 percent opacity and 10 to 20 pixels of blur suit most cards.
- Tune the edge. A thin border at 20 to 40 percent opacity and a soft shadow lift the panel off the background.
- Choose a background. Try the gradients or your own colours or image. The shapes show the blur at work.
- Check the contrast. Read the estimate under the preview and change the text colour if needed.
- Copy the code. Open the Code tab and pick CSS, Tailwind, HTML or React.
The CSS behind glassmorphism
The effect needs only a few properties, and each has a job. The background is a semi-transparent colour that tints the glass. backdrop-filter: blur() frosts whatever is behind the element. The optional saturate() and brightness() functions bring back the colour that blur washes out. A border with a low-opacity light colour mimics the edge of a glass pane, border-radius softens the corners, and box-shadow adds depth. A thin inner highlight, written as an inset shadow along the top, gives the pane a bright lip.
| Property | Typical value | What it does |
|---|---|---|
| background | rgba(255, 255, 255, 0.18) | Tints the glass and sets how much shows through |
| backdrop-filter | blur(14px) saturate(160%) | Frosts and enriches the background |
| border | 1px solid rgba(255, 255, 255, 0.3) | Defines the glass edge |
| border-radius | 20px | Soft corners |
| box-shadow | 0 8px 32px rgba(0, 0, 0, 0.2) | Lifts the panel |
Include the -webkit-backdrop-filter prefix for older Safari, and a fallback inside @supports not so that text stays readable when blur is missing. The generator adds both.
Glassmorphism in Tailwind CSS and React
In Tailwind CSS the same look is built from utility classes: a translucent background such as bg-white/20, backdrop-blur-md, backdrop-saturate-150, a light border such as border border-white/30, rounded-2xl and a shadow. The Tailwind output in the Code tab uses exact arbitrary values from your sliders, such as backdrop-blur-[14px], so what you copy matches the preview. For React, the style object can be spread straight into a component, with WebkitBackdropFilter included. If you want the page background itself to be a gradient, build one with the CSS Gradient Generator.
Choosing a background that makes glass work
Glassmorphism is only as good as the background behind it, because blur needs variation to show. A flat colour looks like a plain tinted box. Soft gradients, blurred shapes, photographs and abstract mesh backgrounds all work, and so do vivid colours with a clear light-to-dark transition. Keep the background simple behind text, since busy detail can still read through. The animated shapes in the preview are a quick way to see how the glass responds when colours move behind it, and if you prefer a still view you can switch the animation off, which also respects people who set reduced motion in their system.
For harmonious background colours, use the Color Wheel or the Color Palette Generator, and the Tints and Shades Generator for light and dark versions of one colour.
Glass styles: frost, clear, dark and liquid
| Style | Look | Best for |
|---|---|---|
| Classic frost | White at about 18 percent with medium blur | Cards and modals on vivid gradients |
| Clear glass | Very low opacity and little blur | Small overlays and badges where the background must stay visible |
| Dark smoke | Dark tint at about 40 percent | Dashboards and media players with light text |
| Violet tint | A coloured tint with high saturation | Brand-coloured panels |
| Liquid glass | High blur, saturation and bright edge | Hero sections, a more modern and fluid look |
| Heavy frost | Strong blur and more opacity | Panels over busy photos |
| Neon edge | Dark glass with a glowing border | Gaming and tech themes |
Accessibility, contrast and motion
The biggest risk of glassmorphism is poor legibility. Text on a translucent surface sits over a background that changes, so a pair that passes in one corner can fail in another. WCAG asks for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text. The readout below the preview estimates the ratio from the average background colour and the glass tint. To improve it, raise the opacity, use a darker tint with light text, add more blur behind the text, or choose a calmer background. Verify the final colours with the Color Contrast Checker.
Respect motion settings too. Drifting backgrounds can distract or cause discomfort, so stop them for users who ask for reduced motion, and never rely on blur alone to show state. Keep focus outlines visible against the glass.
Performance and browser support
backdrop-filter is supported in all current major browsers, though it was unprefixed in Safari later than elsewhere and Firefox added it in version 103. Rendering blur behind an element means the browser must re-draw the area behind it whenever that area changes, so it costs more than ordinary styling. To keep pages smooth, use glass on a small number of surfaces, keep blur values moderate, avoid animating the blurred element, avoid stacking glass inside glass, and test on a mid-range phone. If the effect is not available, the fallback makes the panel more opaque so the design still works.
Design tips for better glass
- Use a light border: it is what tells the eye that the pane has an edge.
- Add saturation, around 150 to 200 percent. Blur drains colour and saturation brings it back.
- Keep radius generous. Soft corners feel more like glass.
- Use one glass level per screen. Nesting reduces clarity.
- Avoid thin or light fonts on glass, and prefer medium or semi-bold weights.
- Let one brand colour show through the shapes behind it for personality.
- Pick brand colours with the Color Picker.
You can also pull background colours straight from a photo with the Image Color Picker.
Accuracy, limits and responsible use
The preview is rendered by your own browser with the same CSS the generator outputs, so what you see is what the browser can do on your device. Other browsers and devices can render blur slightly differently, and real pages will have other content behind the glass. The contrast value is a simple estimate. This free online glassmorphism CSS generator is a design aid, so always test the final code in the browsers and devices you support, and keep text legible for everyone.
Frequently asked questions
What is glassmorphism?
Glassmorphism is a UI design style that looks like frosted glass. It uses a translucent surface, a blur of the background, a light border and a soft shadow so that elements seem to float above colourful shapes.
How do I make a glassmorphism effect in CSS?
Give an element a semi-transparent background such as rgba(255,255,255,0.18), add backdrop-filter: blur(14px), a thin light border, rounded corners and a soft shadow. Place it over a colourful gradient or image. This tool writes the code for you.
What is backdrop-filter in CSS?
backdrop-filter applies effects such as blur, saturation and brightness to everything behind an element, rather than to the element itself. It needs a background that is at least partly transparent to be visible.
Does backdrop-filter work in all browsers?
It works in current Chrome, Edge, Safari and Firefox. Safari used to need the -webkit- prefix, so the generated code includes both. Very old browsers ignore it, which is why the code adds a fallback.
Why is my glassmorphism effect not showing?
Common causes are a fully opaque background, no colourful content behind the element, a parent with overflow or its own filter that stops the blur, or a missing -webkit- prefix in Safari.
How do I add a fallback for browsers without backdrop-filter?
Use an @supports not rule that makes the background more opaque, so text stays readable when blur is unavailable. The code from this generator includes this fallback.
How much blur should I use?
Most glass cards use 8 to 20 pixels. Less than 6 looks like clear glass, and more than 25 looks like heavy frost. Use enough blur to hide detail behind the text.
What opacity is best for glassmorphism?
Between 8 and 30 percent for light glass, and 25 to 50 percent for dark glass. Lower values show more of the background, and higher values make text easier to read.
Is glassmorphism accessible?
It can be, if text has enough contrast over every part of the background. The tool shows an estimated contrast ratio. Aim for 4.5 to 1 for normal text, add a text shadow or raise the opacity if needed.
Does glassmorphism hurt performance?
Backdrop blur is more expensive than normal styling, especially on large areas, on animated pages and on older phones. Use it on a few small surfaces, avoid stacking many layers and test on real devices.
How do I make glassmorphism in Tailwind CSS?
Use classes such as bg-white/20, backdrop-blur-md, border, border-white/30, rounded-2xl and shadow-lg. Choose Tailwind in the Code tab to get a version with exact values from your settings.
What is liquid glass?
Liquid glass is a newer take on the style with stronger blur and saturation, bright edge highlights and a more fluid, light-bending look. The Liquid glass preset gets close with plain CSS.
Can I use my own image as the background?
Yes. Open the Background tab and choose an image file. It is shown in the preview only and is never uploaded, so you can see how the blur works over a real photo.
Can I use the generated code in React or HTML?
Yes. The Code tab gives plain CSS, a complete HTML page, Tailwind classes and a React style object.
What background works best for glassmorphism?
Colourful gradients and soft shapes work best, because blur needs colour changes to show. A flat single colour makes the effect almost invisible.
Can I print or save my design?
Yes. Print / save design creates a sheet with the preview, the settings and the CSS. Only that sheet is printed, not the whole page.
Is this glassmorphism generator free?
Yes. It is a free online glassmorphism CSS generator with no sign-up, and nothing you create leaves your browser.
Sources and further reading
- MDN Web Docs, backdrop-filter.
- Can I use, CSS backdrop-filter browser support.
- W3C, Filter Effects Module Level 2.
- W3C, WCAG 2.1, Success Criterion 1.4.3 Contrast (Minimum).
- MDN Web Docs, prefers-reduced-motion.
- Tailwind CSS, Backdrop blur.
Sources were consulted in October 2026. Standards and rules can change, so always check the official page for your situation.