Developer Design Utility
Glassmorphism Generator
Create glass-style Glassmorphism CSS by adjusting opacity, backdrop blur, border, radius, shadow, and preview the result in real time.
Glassmorphism Settings
Adjust background color, opacity, blur, saturation, border, and shadow values to create your desired glass effect.
Base background color of the glass card. White is suitable for classic Glass UI, while colors work well for accent cards.
Check transparent glass texture and blur effects in real time.
Recommended Presets
Quickly apply glassmorphism combinations commonly used for cards, banners, modals, and dark background UI.
Basic Glass UI
Color Glass UI
Special Styles
Generated Result
Use the code below in CSS files, component styles, or inline styles.
Select settings, then click the Generate CSS Code button.
Help
What is Glassmorphism?
Glassmorphism is a UI style that creates a glass-like surface using a translucent background, blur, subtle border, and shadow. It is often used for cards, modals, banners, dashboards, profile boxes, and overlay panels.
Core CSS Properties
background: Translucent background colorbackdrop-filter: Blurs the background behind the elementborder: Creates the glass edgebox-shadow: Adds depth and layer separation
Recommended Values
- General glass card: Opacity 16%–28%, Blur 14px–24px
- Frosted glass: Opacity 8%–16%, Blur 24px or higher
- Dark background card: Opacity 20%–35%, Border Opacity 15%–30%
- Color glass: Use an accent color with low opacity
Notes
Glassmorphism works better on gradients, images, and patterned backgrounds than on flat solid backgrounds. For readability, avoid making the background too transparent.
What should I do if the glass effect is not visible enough?
Place a gradient or image with visible color contrast behind the card. Increasing the blur value and border opacity can also make the glass effect more noticeable.
How can I improve text readability?
Increase background opacity or use a darker text color. Very transparent glass cards can look attractive, but they may reduce readability in real interfaces.
Does backdrop-filter work in every browser?
Most modern browsers support it, but some environments may have limitations. Including -webkit-backdrop-filter together is recommended.