Who this helps
- Designers preparing overlay panels
- Developers adding a glass-effect card
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.
Create Glass UI
Combine translucent backgrounds and blur effects to create glass-style UI cards.
Live Preview
Opacity, blur, border, radius, and shadow values are reflected instantly in the preview card.
Copy CSS Code
Copy the completed glassmorphism CSS or download it as a CSS file.
Blur
18px
Opacity
22%
Border
34%
Radius
28px
STEP 1
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.
0%
22%
100%
0px
18px
40px
100%
160%
220%
0%
34%
100%
0px
28px
60px
0%
18%
80%
16px
32px
64px
Live Preview
Glass UI
Glassmorphism Card
Check transparent glass texture and blur effects in real time.
Blur
18px
Opacity
22%
Radius
28px
STEP 2
Recommended Presets
Quickly apply glassmorphism combinations commonly used for cards, banners, modals, and dark background UI.
Basic Glass UI
Color Glass UI
Special Styles
STEP 3
Ready
Generated Result
Use the code below in CSS files, component styles, or inline styles.
Select settings, then click the Generate CSS Code button.
Make a glass panel readable on its actual background
Preview a translucent panel and generate blur, saturation, border and shadow CSS. The output includes a more opaque fallback when backdrop filtering is unsupported.
When to use this tool
- Style a card over a patterned background.
- Compare blur with a fallback background.
From input to a checked result
- 1
Choose a valid 3- or 6-digit HEX panel color.
- 2
Start with enough opacity to keep text readable.
- 3
Adjust blur and saturation against the preview background.
- 4
Set border, radius, shadow and padding.
- 5
Export CSS and test the actual background, fallback and target devices.
A light panel
- Input
- #ffffff; opacity 22%; blur 16px
- Result
- A translucent white background with blur(16px).
Readability depends on the image behind the panel.
No backdrop-filter support
- Input
- The generated CSS in a browser without the filter
- Result
- The @supports fallback uses a more opaque background.
The fallback preserves a visible surface but still needs contrast review.
How it works
HEX is converted to RGBA and combined with blur/saturation, a border, radius, shadow and padding. Both backdrop-filter and its WebKit-prefixed form are emitted, along with an unsupported-filter fallback.
Limitations
- Blur may be barely visible over a solid background.
- Large filters and moving backgrounds can be expensive to render.
- The tool does not measure text contrast over every part of a real background.
Your data
Color values and settings are processed locally; the preview does not upload them.
References
Related tools
- Color Palette Generator
Create a compact brand shade scale.
- CSS Animation Generator
Fade an element into view once.
Frequently asked questions
Why can I not see the blur?
The effect filters what is behind the panel. Try a textured background and a translucent panel.
Does more blur ensure readable text?
No. Opacity, text color and the underlying image all matter.
Can I remove the fallback?
Keep or adapt it so the content remains readable where filtering is unavailable.