🪟

Glassmorphism Generator

Create glass-effect CSS styles with blur and transparency

Presets

Glass Properties

Transparency

Blur Intensity

Border Opacity

Border Radius

Tint Color

Quick:

Box Shadow

X Offset

Y Offset

Blur

Spread

Opacity

Preview Background

Custom

Live Preview

Glass Card

Glassmorphism UI

A frosted glass effect created with backdrop-filter and transparency.

Button

Secondary

Values

Background

rgba(255, 255, 255, 0.15)

Backdrop Filter

blur(12px)

Border

1px solid rgba(255, 255, 255, 0.20)

Shadow

0px 8px 32px 0px rgba(0, 0, 0, 0.10)

CSS

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 16px;
  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.10);
}

Tailwind CSS

bg-[rgba(255,_255,_255,_0.15)] backdrop-blur-[12px] border border-[rgba(255,_255,_255,_0.20)] rounded-[16px] shadow-[0px_8px_32px_0px_rgba(0,0,0,0.10)]

Uses Tailwind's arbitrary value syntax. Works with Tailwind v3+.

React / Inline Style

style={{ 
  background: 'rgba(255, 255, 255, 0.15)',
  backdropFilter: 'blur(12px)',
  WebkitBackdropFilter: 'blur(12px)',
  border: '1px solid rgba(255, 255, 255, 0.20)',
  borderRadius: '16px',
  boxShadow: '0px 8px 32px 0px rgba(0, 0, 0, 0.10)'
}}

Share to Community

Was this tool helpful?

What is Glassmorphism Generator?

Free online glassmorphism generator to generate the popular glassmorphism (frosted glass) CSS effect.

Control background transparency, blur intensity, border opacity, and shadow. Preview the effect against different background images and colors. The generator creates the CSS with backdrop-filter: blur() and proper fallbacks. Perfect for modern card designs, modals, and navigation bars. No signup required.

How to Use Glassmorphism Generator

1Adjust the background transparency with the opacity slider
2Set the blur intensity for the frosted effect
3Configure border and shadow properties
4Copy the CSS code with backdrop-filter

Frequently Asked Questions

Glassmorphism is a UI design trend that creates a frosted glass effect using CSS backdrop-filter blur, semi-transparent backgrounds, subtle borders, and shadows. It creates a sense of depth and translucency.

backdrop-filter has ~95% global browser support. The generated code includes a fallback for older browsers that simply shows the semi-transparent background without the blur effect.

The combination of: background with rgba() transparency, backdrop-filter: blur(), a subtle border with rgba(), and an optional box-shadow. The blur amount and transparency level control the glass intensity.

Share this tool

Related Tools

CSS

AI CSS Generator

Free online AI CSS generator - browse 25+ CSS effects or generate custom styles with AI

🎛️

Neumorphism Generator

Free online neumorphism generator - generate soft UI neumorphic CSS styles

SHD

CSS Box Shadow Generator

Free online CSS box shadow generator - create beautiful CSS box shadows with a visual builder and live preview

✂️

CSS Clip Path Generator

Free online CSS clip path generator - create custom CSS clip-path shapes visually

◻️

Border Radius Generator

Free online border radius generator - generate CSS border-radius values with visual editor

🎬

CSS Animation Generator

Free online CSS animation generator - generate CSS keyframe animations visually

.glass { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.20); border-radius: 16px; box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.10); }

style={{ background: 'rgba(255, 255, 255, 0.15)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid rgba(255, 255, 255, 0.20)', borderRadius: '16px', boxShadow: '0px 8px 32px 0px rgba(0, 0, 0, 0.10)' }}

What is Glassmorphism Generator?

Free online glassmorphism generator to generate the popular glassmorphism (frosted glass) CSS effect.

Frequently Asked Questions

backdrop-filter has ~95% global browser support. The generated code includes a fallback for older browsers that simply shows the semi-transparent background without the blur effect.