Dev Tools
Client-sidefiles never upload

Glassmorphism + Neumorphism generator

Two modern UI styles in one tool: **Glass** (backdrop-filter on translucent surfaces) and **Neumorphism** (paired light + dark shadows for raised / inset depth). Live preview on several backgrounds, output CSS or Tailwind v4 classes.

Style
Translucent surface + blur over colourful or photographic backgrounds β€” Apple system control-panel look. Requires backdrop-filter (Safari 14+ / Chrome 76+ / Firefox 103+).
Preview background
Glass card
Glass tint (rgba with alpha)
Border colour
Shadow
Output format
glass-css
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(16px) saturate(1.4);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
β€ΊHow to use
  1. Pick Glass or Neumorphism at the top.
  2. Glass mode: pick a preview background (photo / vivid gradient / dark) β€” glass needs something behind it to read as glass. Tune blur / saturate / tint (rgba) / border / shadow.
  3. Neu mode: pick a surface colour and slide distance / blur / intensity / radius. Negative intensity switches to pressed (inset) mode.
  4. The output tab strip flips between CSS and Tailwind v4 arbitrary classes.
Tips
  • Glass needs backdrop-filter β€” Safari 14+, Chrome 76+, Firefox 103+ all support it. Older browsers fall back to a flat translucent surface.
  • Neu surface can't be pure white / black β€” the algorithm needs headroom to compute the light / dark paired shadows. Light grey (#e0e5ec) is the classic neumorphism surface.
  • Glass on dark backgrounds typically uses rgba(255,255,255,0.1)-ish white tints; light backgrounds call for rgba(0,0,0,0.1) black tints.
  • We cover glassmorphism.com and neumorphism.io in one stop β€” that's the differentiator.

Related tools