Shadows give flat interfaces depth. They lift a card off the page, show that a button can be pressed, and separate a modal from the content behind it. But the CSS box-shadow property has five values per shadow (horizontal offset, vertical offset, blur, spread and colour, plus an optional inset), and the best-looking modern shadows actually stack several layers. Getting that right by trial and error in code is slow. This free CSS box shadow generator lets you design shadows visually. Drag the sliders and watch the preview update live on a card, with a background colour and corner radius you can change to match your site. Add as many layers as you like and fine-tune each one, including inset shadows for pressed or recessed effects, and control the colour and opacity separately so shadows stay subtle. Start from presets such as soft (the popular smooth, layered style), subtle, medium, sharp, floating, neumorphic, glow and inner, then tweak. The CSS updates as you go and is ready to copy, with an optional Tailwind arbitrary-value version. Tip: realistic shadows use a dark, slightly tinted colour at low opacity rather than pure black, and increase blur as the offset grows. Everything runs in your browser.
Design a shadow
How to use it
- Pick a preset as a starting point.
- Adjust each layer’s offset, blur, spread, colour and opacity.
- Match the box and page colours to your design.
- Copy the CSS.
box-shadow syntax
box-shadow: [inset] x y blur spread color;, with multiple shadows separated by commas.
FAQ
Why use several shadow layers?
Real shadows are soft near the object and fade gradually. Stacking a tight shadow and a wide one mimics that.
What does spread do?
It grows (positive) or shrinks (negative) the shadow before blurring.
Do box shadows hurt performance?
Large blurs on many elements or during animations can. Animate opacity of a pseudo-element instead.
Is anything uploaded?
No. It runs in your browser.
Comments
Post a Comment