Frosted Glass Card CSS (Glassmorphism Generator)

+100 Tools
100% Free
0 Pop-up Ads
No Sign-up
Runs locally

Related Tools

Color Contrast Checker (WCAG)

Contrast ratio for two colors with AA/AAA pass or fail.

Color Palette Extractor

Pull dominant, vibrant and muted colors from an image.

CSS Gradient Generator

Build linear or radial gradients with live CSS output.

HEX to RGB Color Converter

Convert between HEX, RGB, HSL and CMYK.

Frosted Glass Card CSS

Design frosted-glass UI cards with CSS or Tailwind output.

About this option

Glassmorphism makes a panel look like frosted glass floating over a colourful background: a blurred, semi-transparent surface with a thin light border. This page opens the generator on the classic light-frosted settings.

When to use it

Cards, modals and panels over gradient or photo backgrounds
Dashboards and login screens with a modern look
Pricing cards and feature tiles that should feel light

How to use it

1Open the page — the frosted card is already shown over a gradient
2Adjust blur, transparency, radius and shadow
3Copy the CSS and apply it to your card element

Frequently asked questions

Which CSS property creates the blur?

`backdrop-filter: blur()`, which blurs whatever is behind the element. The generator also includes the `-webkit-` version for Safari.

Why does my card look flat?

Glass needs something colourful or detailed behind it. Over a plain white background the blur has nothing to show.

Is backdrop-filter supported everywhere?

In all current major browsers. Add a solid fallback colour for older ones.