99tools

Glassmorphism & Neumorphism Generator

runs in your browser

Glass panes with backdrop blur, tint and border, and neumorphic surfaces lit from a corner: sliders to CSS and Tailwind, plus the readability checks both need.

Style

Preview

over #0f6b45

Frosted glass

Readability depends on what is behind.

Over #0f6b45 the pane reads as #4b9074: ink text 4.98:1, white text 3.79:1 — use ink. The real figure changes with whatever scrolls behind.

Pane

Blur
Opacity
Saturate
Border
Radius
Shadow
Tint
Behind the glass

CSS

background: rgb(255 255 255 / 0.25);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
border: 1px solid rgb(255 255 255 / 0.3);
border-radius: 16px;
box-shadow: 0 3.2px 13px rgb(0 0 0 / 0.1);

backdrop-filter needs the -webkit- prefix in Safari before 18; Firefox ships it since 103. Text on glass has no fixed contrast — check it over the darkest and lightest content it will sit on.

Tailwind

bg-white/25 backdrop-blur-md backdrop-saturate-[140%] border border-white/30 rounded-2xl shadow-[0_3.2px_13px_rgb(0_0_0_/_0.1)]

Named utilities where Tailwind v4 has them; arbitrary values with underscores for spaces elsewhere.

about this tool

Glass

A glass pane is a translucent tinted background, a backdrop-filter that blurs and usually saturates whatever lies behind, a one-pixel border of the tint at a higher opacity to give the edge, a generous radius and a soft shadow. The sliders drive exactly those declarations; the tool writes the -webkit-backdrop-filter twin because Safari needed it until version 18, and omits any part set to zero rather than emitting no-ops. Tailwind output uses bg-white/25, backdrop-blur-md, backdrop-saturate-150 and friends where the value is on Tailwind's scale, and arbitrary values otherwise.

The honest part is the readability line. Glass has no colour of its own — it is the backdrop, blurred and tinted — so no contrast figure applies to the pane alone. The tool composites the tint at its opacity over a "behind the glass" colour of your choosing, reports the resulting pane colour and the WCAG contrast of ink and of white text on it, picks the better one for the preview text, and warns when neither reaches 4.5:1. Check the darkest and the lightest content the pane will ever sit on; the preview's gradient backdrop is there to make the blur visible, not to certify anything.

Neumorphism

A neumorphic surface is the page colour again, made to look raised by two shadows: a darker one offset away from the light source and a lighter one towards it, both derived from the surface colour by shifting lightness in OKLCH so they keep its hue, with chroma pulled in where the shift would leave sRGB. Blur defaults to twice the distance, which is the classic proportion, and follows the distance slider until you set it yourself. Convex and concave shapes add a gentle diagonal gradient across the surface — a softer pair than the shadows, so the surface curves without stripes — and pressed turns both shadows inset. The light source can be any corner.

The style's known weakness is reported rather than hidden: the control's edge exists only as its shadows, and WCAG 1.4.11 asks 3:1 between a component's boundary and its surroundings. The tool measures the surface against its dark shadow and flags anything under 3:1, which the classic soft-grey look always is. Raise the intensity, or add a border, for controls people must find.

Limits

Both styles are single-element effects; hover, focus and active states are yours to add. The glass readability figure is for a flat backdrop colour; real content behind the pane varies, and a photo may have both extremes. The preview cannot show backdrop-filter in browsers that lack it, and jsdom ignores it entirely. Tailwind output covers the default theme scales. Nothing is stored.

Both effects are shadows underneath: box shadow generator exposes the layers directly. Border radius & clip-path shapes the element the effect sits on.

questions

What CSS makes the frosted glass effect?
A translucent background — rgb(255 255 255 / 0.25) — plus backdrop-filter: blur(12px), usually with saturate() to keep the blurred colours lively, a one-pixel border of the same tint at a slightly higher opacity for the edge, a large radius and a soft shadow. Safari needed the -webkit-backdrop-filter prefix until version 18, so the tool writes both.
Why is text on glass hard to read?
Because the pane has no colour of its own: it is whatever is behind it, blurred and tinted. Over a dark photo the same pane is dark, over a light one it is light, so no single contrast ratio applies. The tool composites the pane over a backdrop colour you choose and reports the contrast for ink and for white text, and tells you to check the darkest and lightest content it will ever sit on.
How does neumorphism work in CSS?
Two shadows on a surface the same colour as the page: a darker one offset away from the light source and a lighter one offset towards it, typically with blur at twice the offset. Convex and concave variants add a gentle gradient across the surface; pressed uses the same two shadows inset. The tool derives the light and dark colours from the surface in OKLCH so they stay the same hue.
Is neumorphism accessible?
Rarely as-is. A control’s edge exists only as its shadows, and WCAG 1.4.11 asks 3:1 between a component’s boundary and its surroundings; the classic soft grey look manages about 1.5:1. The tool reports the surface-to-shadow contrast and flags it when it falls short — raise the intensity, or add a border, for anything people must find.
Does backdrop-filter hurt performance?
It can. Blurring the backdrop is done every frame the pane or its background moves, and large blurred areas on low-end phones drop frames. Keep panes small, avoid animating them over busy content, and prefer moderate blur radii; 8–16px reads as glass without costing much.