About the Handiwork CSS Box Shadow Generator
Use this CSS Box Shadow Generator to build layered shadows visually and copy a complete declaration. Start with a practical preset, add up to four outer or inset layers, reorder them, and adjust offset, blur, spread, color, and opacity while the preview updates instantly.
How to use the Handiwork CSS Box Shadow Generator
- Choose a preset or begin with the default soft card shadow.
- Fine-tune the active layer, then add, duplicate, remove, or reorder layers as needed.
- Check the combined live preview and copy the generated multi-line box-shadow CSS.
Create and copy CSS box-shadow code
A CSS box shadow combines horizontal offset, vertical offset, blur radius, spread radius, and color. The optional inset keyword moves a layer inside the element, and commas separate multiple layers. This generator keeps each layer in CSS order and emits earlier layers first so the copied declaration is ready to paste.
Offset, blur, and spread
Horizontal and vertical offsets control shadow direction. Blur softens the edge without changing layout, while spread expands positive shadows or contracts negative shadows before blur is applied. Small values usually work best for interface cards and controls.
Create subtle card and button shadows
For a natural elevation effect, use a modest positive vertical offset, generous blur, low opacity, and a neutral color related to the surrounding text or background. Hard edges and higher opacity are better suited to graphic or neo-brutalist styles.
Outer shadows versus inset shadows
Outer shadows make an element appear raised from the page. Inset shadows are painted inside the border edge and can suggest a pressed button, recessed field, or inner highlight. The same offset, blur, spread, and color controls apply to both.
Test the copied shadow in context
A shadow’s appearance depends on the element size, border radius, background, and nearby content. Use the preview to establish the effect, then test the generated declaration on the real component and adjust it at the viewport sizes your design supports.
Assumptions and limitations
- The editor supports up to four comma-separated shadow layers; more complex stacks must be extended manually.
- The preview uses a fixed white card, so contrast may differ on your final background.
- The exported color uses eight-digit hexadecimal notation to include opacity.
- Large blur and spread values can increase paint cost when applied to many elements.
Sources and standards
These authoritative references were used to verify the method and guidance on this page.
Frequently asked questions
What is the order of CSS box-shadow values?
The common order is horizontal offset, vertical offset, blur radius, spread radius, and color. The optional inset keyword may be placed before or after the length and color values.
What is a good box shadow for a card?
Start with a small positive vertical offset, a blur around two to three times that offset, little or negative spread, and roughly 10% to 18% opacity. Then adjust for the card size and background.
What does spread do in box-shadow?
Positive spread expands the shadow shape before it is blurred. Negative spread contracts it, which can keep a soft shadow close to the element.
How do I create an inset box shadow?
Enable Inner shadow. The generated declaration adds the inset keyword so the shadow is painted inside the element instead of outside it.
Can CSS use multiple box shadows?
Yes. Add up to four layers in the generator, select a layer to edit it, and reorder layers to control their paint order. The copied declaration separates them with commas.
Does box-shadow affect element size or page layout?
No. A box shadow is painted around or inside the element and does not change its box dimensions or reserve layout space.