Loading…
Loading…
Create frosted-glass cards with backdrop blur, tint, saturation and a subtle border — with a fallback for browsers without backdrop-filter.
Also covers: Frosted glass CSS · Backdrop-filter generator
backdrop-filter works in all current browsers; the CSS adds a more opaque fallback for older ones. Glass only looks like glass over a busy background — and text contrast changes with what's behind it.
Glass card
The background shows through, blurred. Check your text stays readable on every backdrop.
.glass { background: rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);} /* Browsers without backdrop-filter: a more opaque background keeps text readable. */@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgba(255, 255, 255, 0.73); }}Tint, transparency, blur, saturation, border and corners.
With the -webkit- prefix and a fallback for older browsers.
All current browsers. Safari still reads the -webkit- prefixed version, which the CSS includes.
backdrop-filter only blurs what's behind the element, so it needs a colourful or detailed background.
Text contrast changes with whatever is behind the card. Keep the tint opaque enough and test on your real backgrounds.
Colour
Pick any colour with a saturation/brightness square, from anywhere on your screen (EyeDropper), or from a photo — and get it in HEX, RGB, HSL, OKLCH and more.
Colour
Convert any colour between HEX, RGB, HSL, HSV, HWB, CMYK, Lab, LCH, OKLab and OKLCH, with the nearest CSS colour name.
Palettes
Build a palette from one colour — a 50–950 shade scale or complementary, analogous, triadic and other harmonies, worked out in OKLCH — and export CSS, Tailwind, SCSS or JSON.
Colour
Pull the main colours out of a photo or logo, with how much of the image each covers, and export them as CSS variables or JSON.
Accessibility
Check text and background colours against WCAG 2.2 AA and AAA, see the exact contrast ratio, and get the closest colour that passes.
CSS
Design linear, radial and conic CSS gradients with any number of colour stops and vivid OKLCH blending, and copy the CSS.