CSS Glassmorphism Generator

Create the frosted-glass (glassmorphism) effect in CSS with blur, transparency, saturation, border and radius, with live preview. No sign-up.

./glassmorphism-generator
Preview
Background
Glassmorphism
Blur8px
Saturation150%
Opacity15%
Border30%
Radius16px
CSS code
background: rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8px) saturate(150%);
-webkit-backdrop-filter: blur(8px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.3);

Remember the element must sit over some content (image or color) for the blur to show.

Everything is generated in your browser; nothing is sent to any server.
Compartir

Reviews & ratings

No reviews yet. Be the first to leave one!

Write a review

Your rating *

Related tools

Others from the catalogue that pair well with this one.

CSS Gradient Generator Create linear, radial and conic CSS gradients with live preview, unlimited color stops and ready-to-copy code. No sign-up. WCAG Contrast Checker Compute the contrast ratio between two colours and check it against WCAG AA and AAA, for text and interface elements. Suggests a fixed colour without losing the hue. CSS Box Shadow Generator Create CSS box-shadow effects with offset, blur, spread, color and opacity control, multiple layers, inset and live preview. No sign-up.
Back to all tools