🪟 CSS Glassmorphism Generator

Generate CSS glassmorphism effects visually. Adjust blur, transparency, border, and background. Copy ready-to-use CSS. Free glassmorphism generator for modern UI design.

Tint Color

Blur: 12px

BG Opacity: 15%

Border Opacity: 30%

Border Radius: 16px

Saturation: 180%

Glass Card

Glassmorphism effect preview

Generated CSS

How to Use

Adjust the controls

Use the sliders to set blur, background opacity, border opacity, radius, and saturation. Pick a tint color with the color swatch.

See the live preview

The glass card updates instantly. Experiment with values to achieve the look you want.

Copy the CSS

Click Copy CSS to copy the generated code to your clipboard. Paste it into your stylesheet.

Frequently Asked Questions

What is glassmorphism? +

Glassmorphism is a UI design trend that mimics frosted glass — featuring blur, transparency, subtle borders, and shadows to create a layered depth effect. It became popular with iOS and macOS Big Sur designs.

What CSS properties create a glass effect? +

The key property is backdrop-filter: blur() which blurs the content behind the element. Combined with a semi-transparent background (rgba with low alpha), a thin border (rgba white), and box-shadow, you get the glassmorphism look.

Does backdrop-filter work in all browsers? +

backdrop-filter is supported in Chrome, Edge, Safari, and Firefox (since version 103). Add -webkit-backdrop-filter for Safari compatibility. Internet Explorer does not support it.

How do I add a glassmorphism card to my website? +

Copy the generated CSS and apply it to your element. Make sure the element has colorful content behind it — glassmorphism requires visible background content for the blur effect to look good.

What is the best blur value for glassmorphism? +

A blur of 10–16px is typically the sweet spot. Too little (under 5px) and the effect is barely visible. Too much (over 24px) and the background is unrecognizable. Pair with 15–25% opacity for best results.

Guide : Générateur CSS Glassmorphism

Qu'est-ce que c'est ?

Le Générateur Glassmorphism crée des effets de verre dépoli pour les cartes et panneaux CSS avec flou d'arrière-plan, transparence et bordures subtiles.

La tendance glassmorphism ajoute de la profondeur et de la modernité aux interfaces utilisateur, populaire depuis iOS 15 et Windows 11.

Comment utiliser

Ajustez le flou, la transparence et la couleur de fond.
Configurez l'opacité et la largeur de la bordure.
Prévisualisez en temps réel sur un fond coloré.
Copiez le CSS généré (backdrop-filter, background, border).

Conseils professionnels

Vérifiez la compatibilité de backdrop-filter — ajoutez un fallback pour les navigateurs non supportés.
Utilisez des arrière-plans colorés contrastés pour que l'effet verre soit visible.