Params
blur 18px / alpha 0.3
Output
backdrop-filter: blur(18px)
Design Tools
CSS Glassmorphism — Frosted Card Style Generator
Tune color, opacity, blur, and outline to preview and generate frosted-glass card CSS with backdrop-filter. Useful for translucent panels and nav layers; everything runs in the browser.
CSSGlassmorphismbackdrop-filter
Favorite this tool
No favorite storage mode has been selected.
Quick actions
Copy this tool URL or open the system share sheet on a supported device.
设计配色
CSS Glassmorphism
Tune color, opacity, blur, and outline to preview and generate frosted-glass card CSS with backdrop-filter. Useful for translucent panels and nav layers; everything runs in the browser.
GLASS
生成 CSS 代码
Use cases
- Build translucent card backgrounds
- Tune backdrop-filter parameters
- Export panel and nav-layer styles
How to use
- Adjust color and opacity
- Set blur and outline
- Preview and copy the CSS
Example input and output
FAQ
Which CSS feature does it rely on?
Primarily backdrop-filter. Unsupported browsers need a fallback solid or opaque background.
How does it differ from the other glassmorphism tool?
This one focuses on card color, opacity, blur, and outline together. The other exports quick frosted snippets with common defaults and prefixes.
Tools
Related tools
Continue with another translated tool for a nearby task.
CSS Neumorphism
CSS Neumorphism — Soft UI Shadow Generator
Generate neumorphic inset/outset shadow CSS from background color, distance, and blur. Preview raised and pressed looks for buttons, cards, and light soft-UI controls.
CSS Neumorphism Shadow
CSS Background Pattern
CSS Background Pattern — Dots, Stripes, and Grids
Generate pure CSS background patterns such as dots, stripes, checkers, and grids. Tune colors and size, then copy the CSS for decorative fills, placeholders, and visual experiments.
CSS Background Pattern