Dev Tools

Box Shadow Generator

Generate CSS box-shadow with visual controls. Adjust offset, blur, spread, color, and inset. Live preview and copy.

Quick Answer

CSS box-shadow syntax: box-shadow: x y blur spread color; — e.g. box-shadow: 4px 4px 10px rgba(0,0,0,0.2);

box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.20);

About This Tool

The Box Shadow Generator provides a visual interface for creating CSS box-shadow values. Box shadows add depth, dimension, and visual hierarchy to elements on a webpage. Instead of guessing pixel values and opacity levels, this tool lets you drag sliders and see the result instantly, then copy the production-ready CSS code.

Understanding Box Shadow Values

The box-shadow property takes up to six values: optional inset keyword, horizontal offset (X), vertical offset (Y), blur radius, spread radius, and color. X and Y position the shadow relative to the element. Blur controls how soft or sharp the shadow edges are. Spread expands or contracts the shadow size. Color typically uses rgba to control transparency. You can also stack multiple shadows by comma-separating them for complex lighting effects.

Design Best Practices

Modern UI design favors subtle shadows with low opacity (10-25%) and relatively large blur values. The Y offset should generally be larger than X to simulate light coming from above, which feels natural. Avoid pure black shadows on colored backgrounds. Instead, use a darker shade of the background color for shadows that feel cohesive with the design. The spread value is often negative for the popular lifted card effect where the shadow is smaller than the element.

Frequently Asked Questions

Can I use multiple box shadows?
Yes. Separate multiple shadows with commas. Layered shadows create more realistic depth. A common pattern is a tight, dark shadow for definition plus a wider, lighter shadow for ambient occlusion.
What is the inset keyword?
Inset makes the shadow appear inside the element instead of outside. This is useful for pressed button states, input field styling, and creating inner glow effects.
Do box shadows affect layout?
No. Box shadows are purely visual and do not affect the box model or layout. They can overflow into adjacent elements visually but do not change spacing or dimensions. Use outline or border if you need something that affects layout.
What is the performance impact of box shadows?
Box shadows are GPU-accelerated in modern browsers and have minimal performance impact for static elements. However, animating box-shadow can be expensive because it triggers repaints. For animated hover effects, consider using a pseudo-element with opacity transitions instead.
How do I create a colored glow effect?
Set X and Y to 0, use a large blur (20-40px), and set the color to a bright, semi-transparent color. For example: box-shadow: 0 0 30px rgba(99, 102, 241, 0.5) creates a purple glow effect around the element.

You might also like

Dev Tools

CSV to JSON Converter

Convert CSV data to JSON array of objects with header detection.

⏱ instantDev Tools

Context Window Calculator

Convert words, pages, or audio minutes to tokens. Check fit in every LLM window.

⏱ instantDev Tools

JSON to YAML Converter

Convert between JSON and YAML formats with real-time preview.

⏱ instant