๐ CSS Box Shadow Generator
box-shadow: 4px 4px 12px 0px rgba(26, 58, 92, 0.35);
Adjust the horizontal and vertical offset, blur radius, spread radius, color, and opacity with sliders to generate box-shadow CSS code, with a live preview. Supports inset (inner) shadows too. Handy for designing card UIs or buttons.
How to use
- Use the sliders to adjust the horizontal offset, vertical offset, blur, and spread.
- Choose a color and opacity, and check "Inset shadow" if needed.
- Adjust while watching the preview, then use "Copy" to copy the generated CSS code.
How the calculation works
This tool builds a CSS box-shadow value with sliders. box-shadow: [inset] x-offset y-offset blur spread colour; โข x / y offset: position of the shadow; positive values move it right / down, negative left / up. โข blur: larger values make the edge softer and wider (it cannot be negative). โข spread: positive values grow the shadow, negative values shrink it. โข colour and opacity: the #rrggbb colour and opacity are output as rgba(red, green, blue, opacity). โข inset: draws the shadow inside the element, making it look pressed in.
Worked example
Default output box-shadow: 4px 4px 12px 0px rgba(26, 58, 92, 0.35); #1a3a5c is red 0x1a = 26, green 0x3a = 58, blue 0x5c = 92. A common "floating card" shadow box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1); Inner shadow box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
Things to be aware of
- Separate values with commas to layer several shadows. Combining a soft wide shadow with a tighter darker one looks natural.
- Very large shadows, or shadows on many elements, can slow down scrolling and rendering.
- box-shadow follows the element's rectangular box. To follow the shape of a transparent image, use filter: drop-shadow().
FAQ
Can I layer multiple shadows?
No, the current version only generates a single shadow. If you need multiple shadows, manually combine generated code with commas.
What does "spread radius" do?
It expands or shrinks the size of the shadow โ a positive value makes the shadow bigger, a negative value makes it smaller.
What does "inset shadow" mean?
Adding the inset keyword makes the shadow appear inside the element instead of outside it, useful for creating a recessed/pressed-in look.