DarnlyGlassmorphism generator, with a readability check
Make a frosted glass card and see it over colorful backgrounds as you go. The card tells you when the text gets hard to read. Copy it as CSS, as Tailwind classes, or as a prompt for your AI coding agent.
Free from Darnly. Spot a bug in the app you're building? Darnly hands it to Claude Code, Codex or Cursor in one key.Add to Chrome
This text sits on your glass. Drag the card over the busiest part of the background.
Get startedMore free tools
See all 89 tools- Font finderSee what fonts any website uses, whether they’re free, and copy them into your project.
- Color palette from imageThe main colors of any screenshot or logo, as hex, CSS and Tailwind.
- Website color finderGet any website’s color palette and CSS color variables, ready for CSS, Tailwind or your AI agent.
How it works
- Pick a glass style and a background. Drag the card around to test it over the busiest part of the picture, or try it on your own screenshot.
- Move the sliders. The badge on the card tells you whether the text is still easy to read. If it isn’t, press “Make it readable”.
- Copy the CSS, the Tailwind classes, or a prompt that tells your AI coding agent where to use it.
Questions
What is glassmorphism?
A frosted-glass look: a see-through panel that blurs whatever is behind it, with a faint light border. It is made with the CSS backdrop-filter property, which every current browser supports.
Why does my glass look flat?
Glass only shows when there is something colorful behind it. On a plain white page it just looks grey. Put it over a photo, a gradient or colorful shapes.
How do I keep the text readable?
Blur and opacity do most of the work. More blur smooths out busy details, and a stronger tint makes the background behind the text more even. The badge on the card measures the contrast between your text and the glass under it, the same way accessibility checks do: 4.5 to 1 or more is good for normal text.
Why is the contrast a guess?
The real background depends on where the panel ends up on your page and on what scrolls behind it. We measure the worst spots under the card in this preview. Drag the card over the busiest area to check the hardest case.
What happens in old browsers?
The CSS includes a fallback: browsers without backdrop-filter get a more solid background, so the text stays readable even without the blur.
Why does the CSS have a -webkit- line?
Older Safari versions only understand -webkit-backdrop-filter. Keeping both lines makes the blur work everywhere.
Is anything uploaded?
No. Everything, including your own background picture, stays in your browser.