Dark Glassmorphism Card CSS 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.

Dark Glassmorphism Card CSS

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

About this option

A dark tint turns frosted glass into smoked glass: richer, moodier and easier to read light text on. This page opens the generator with a black tint, stronger blur and a deeper shadow.

When to use it

Dark-mode interfaces and dashboards
Cards over bright photos where white text must stay readable
Music players, gaming and crypto designs

How to use it

1Open the page — the smoked-glass card is already shown
2Adjust the transparency until text is readable against your background
3Copy the CSS and paste it into your project

Frequently asked questions

How do I keep text readable?

Raise the tint opacity so the glass is darker, and use white or very light text.

Why is there still a light border?

A faint white edge sells the glass effect by catching the light; reduce its width to 0 for a flatter look.

Can I tint it blue or purple?

Yes. Change the tint colour to any dark hue for a coloured smoked glass.