Glassmorphism CSS Generator | Free Online Tool

Glassmorphism CSS Generator

Default Style

Share Style

Copy the link or scan the QR code:

Core Glassmorphism

Blur Radius (px) 10px

Saturation (%) 100%

Brightness (%) 100%

Contrast (%) 100%

Background

Background Type Solid Color Linear Gradient

Glass Color

Gradient Preset

Angle (deg) 45deg

Color 1

Color 2

Glass Opacity 0.2

Noise Overlay

Border Radius

Global Radius (px) 15px

TL (px)

TR (px)

BL (px)

BR (px)

Border

Enable Border

Width (px) 1px

Style Solid Dashed Dotted Double Groove

Color

Opacity 0.3

Shadows

Enable Shadow

Offset X (px) 0px

Offset Y (px) 10px

Blur Radius (px) 20px

Color

Opacity 0.1

Layout & Shape

Width (px) 300px

Height (px) 200px

Padding (px) 20px

Text & Content

Text Color

Heading Font Family

Paragraph Font Family

Preview Title Text

Preview Paragraph Text This is a preview. Edit me!

Transitions & Hover

Enable Transitions

Duration (s) 0.3s

Glassmorphism

This is a preview. Edit me!

Preview BG:

Recommended Google Font Imports

HTML Snippet (Preview Element Content)

CSS Snippet

PNG export captures the preview element. May fail with complex styles or browser limitations.

Saved Presets:

No presets saved yet.