CSS Glassmorphism Generator

Craft beautiful frosted glass effects for your web elements with real-time customization.

Blur (px): 5px

Transparency (%): 20%

Background Color (for transparency):

Border Color:

Border Opacity (%): 30%

Border Width (px):

Border Radius (px):

Shadow X Offset (px):

Shadow Y Offset (px):

Shadow Blur (px):

Shadow Spread (px):

Shadow Color:

Shadow Opacity (%): 10%

Glassmorphism Effect

CSS

HTML

Adjust properties to generate CSS glassmorphism code.

Adjust properties to generate HTML/CSS for glassmorphism.

Copied!