How to make a CSS box shadow
- Start from a preset, or adjust the sliders for the selected layer: offset, blur, spread, color, and opacity.
- Press Add layer to stack another shadow on top, and use Move up or Move down to change which one is drawn first.
- Change the page color and box color to match your design, then press Copy CSS or copy the Tailwind class.
The CSS uses rgba() colors, which every browser understands. A spread of 0 and a color with some transparency are the safest start. Shadows are not clipped by neighbors, but a parent with overflow: hidden will cut them off.
Questions
Is anything uploaded or saved?
No. The shadow is drawn and the CSS is written by your browser. Nothing is sent to a server or stored.
What do offset, blur, and spread mean?
Offset moves the shadow right (X) and down (Y); negative values move it left and up. Blur softens the edge, and 0 gives a hard edge. Spread grows or shrinks the shadow before blurring, so a negative spread pulls the shadow in under the box.
How do I make a shadow that looks natural?
Stack several layers with small opacity, each with a larger offset and blur than the one before. The "Soft layers" preset does this. Keep opacity low, usually 5 to 15 percent, and use a negative spread on large blurs so the shadow does not spill out at the sides.
How do I use it in Tailwind CSS?
Copy the Tailwind class line and add it to your element, for example class="shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1)]". In Tailwind the underscores stand for spaces. You can also keep the CSS and add it through a custom shadow in your theme.
What is an inset shadow?
An inset shadow is drawn inside the box instead of behind it, which makes the box look pressed in. Switch on "Inset" for a layer. Mixing a dark and a light inset layer gives the soft pressed-button look.
Credits
Built by OneTooling using standard browser features. No third-party code runs on your data.