14 / 16

ShadowLab

[ 2026 ]

  • UI/UX design & front-end development
  • Tools

A professional CSS shadow generator with real-time preview.

See the live project
ShadowLab interface: a white square with a shadow in the centre and shadow sliders on the right.

The fourth project of the “52 sites in 2026” challenge: a tool to visualise and generate complex CSS shadows.

Concept

Make layered CSS shadows easy to create — the kind that gives modern interfaces realistic depth.

Key features

  • Multiple layers — Unlimited stacked shadows for highly realistic effects.

  • Presets — Ready-made Soft, Sharp, Neumorphism and Material Design collections.

  • Universal export — One-click copy as CSS or Tailwind classes.

  • Shortcuts — Keyboard shortcuts for a faster workflow.

Tools

React · Vite · Framer Motion · Radix UI · CSS Modules

Credits

Role
UI/UX design & front-end development
Duration
1 week