Pevlika

Box Shadow Generator

Adjust offsets, blur and colour to design a shadow, then copy the CSS.

Runs in your browser — nothing is uploaded

How to use Box Shadow Generator

  1. Adjust the controls — the preview updates live.
  2. Copy the generated CSS.
  3. Paste it into your stylesheet.

Questions

What do the four numbers mean?

box-shadow: x-offset y-offset blur spread colour. Negative spread makes the shadow smaller than the element; inset draws it inside.

Text Shadow GeneratorCSS text shadows: drop shadow, neon glow, outline and retro 3D. Neumorphism GeneratorSoft UI shadows: flat, concave, convex and pressed shapes. Glassmorphism GeneratorFrosted-glass cards with backdrop blur, transparency and borders. CSS Gradient GeneratorDesign linear, radial and conic CSS gradients and copy the code.