CSS Glassmorphism Generator

Create beautiful frosted glass effects with CSS.
Customize blur, transparency, borders, and shadows.

Glassmorphism Card

This is a preview of the glassmorphism effect. Adjust the controls below to customize the look.

Background Preview

Backdrop Blur16px

Background Color

Background Opacity15%

Border Color

Border Opacity30%

Border Width1px

Border Radius16px

Shadow Blur32px

Shadow Opacity10%

Output Format:

CSS Code

background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);

Note: The backdrop-filter property requires the -webkit-backdrop-filter prefix for Safari support. Both are included in the generated CSS.

Extract glassmorphism styles from any website

See a glass effect you love? Frontend Hero's CSS Scanner extracts it in 2 clicks. Works on any website, including backdrop-filter and all modern CSS.

Get Frontend Hero now →

Explore more CSS tools

CSS Grid Generator

Create grid layouts visually

CSS Flexbox Generator

Create flex layouts visually

CSS Gradient Generator

Create custom gradients

CSS Text Gradient

Gradient text effects

CSS Gradients Collection

275+ ready-to-use gradients

CSS Box Shadow Generator

Design multi-layer shadows

CSS Selection Generator

Style text highlight colors

CSS Scrollbar Generator

Style custom scrollbars

CSS Blend Mode Generator

Mix colors with blend modes

CSS Cursor Generator

Preview all cursor styles

CSS Loader Generator

Create loading animations

BTN

CSS Button Generator

Design buttons with hover effects

✨

CSS Glow Generator

Create neon glow effects

Fluid Typography

Scale text across screen sizes

Browse all free CSS tools →