Design Tools
Color Picker
Pick a colour and read off its HEX, RGB and HSL values.
Design Tools
Glassmorphism Generator
Tune blur, tint and highlight borders to build a frosted-glass card in CSS.
Tool Panel
Processed locallyAbout Glassmorphism Generator
Tune backdrop blur, saturation, tint opacity and the highlight border; the preview sits on a colourful backdrop because a flat one hides the effect. The output carries the -webkit- prefix so Safari works too.
- 1
One card style out of five parameters: tint colour and opacity, blur (0–40px), saturation, border brightness and corner radius — five CSS declarations in one block.
- 2
It emits **both `backdrop-filter` and `-webkit-backdrop-filter`**: Safari 16 still only honours the prefixed form, and without it Apple devices fall back to a plain translucent panel.
- 3
Frosted glass is fundamentally "blurring what is behind": the preview deliberately puts two coloured blobs back there, because with a solid colour behind it `backdrop-filter` looks like it did nothing.
- 1
Move the four sliders
Blur and saturation set the texture, tint opacity sets the transparency, and border brightness keeps the edge readable on dark backgrounds.
- 2
Watch the preview
The coloured blobs are the content behind the card; judging the change against them is the clearest feedback.
- 3
Copy the whole block
Five declarations including the prefix, ready for your card selector.
The two usual causes: (a) the element sits on a flat colour, so there is nothing to blur; (b) an ancestor carries `filter`, `transform` or `backdrop-filter`, creating a stacking context that makes the inner `backdrop-filter` fail in some browsers. Also check that your build did not strip the prefix — this tool generates the `-webkit-` line for you.
The panel degrades to a translucent background — `background: rgba(...)` still applies, it simply is not blurred. That is why tint and blur are separate parameters here: on an unsupporting browser the content stays readable.
Related tools
View allDesign Tools
Contrast Checker
Check foreground and background contrast against accessibility thresholds.
Design Tools
Design Tools
Gradient Generator
Build CSS linear and radial gradients visually, then copy the code.
Design Tools
Design Tools
Box Shadow Generator
Tune a box shadow visually and copy the CSS.
Design Tools
Design Tools
Unit Converter
Convert physical units across length, weight, volume and more.
Design Tools
Design Tools
Bytes Converter
Convert between bytes, KB, MB, GB and TB.
Design Tools
Design Tools
Border Radius Generator
Tune each corner visually and copy the CSS border-radius.
Design Tools
Design Tools
Clip Path Generator
Drag the points to shape a polygon and copy the CSS clip-path.
Design Tools