How to Create a CSS Box Shadow
Box shadows add depth and polish to cards, buttons, and modals. Design them visually instead of guessing CSS values.
Quick Answer
Use the free CSS box shadow generator at dotsapps.com. Adjust offset, blur, spread, and color visually. Copy the CSS code and paste it into your stylesheet.
Understanding CSS Box Shadow Values
The CSS box-shadow property takes several values:
box-shadow: offset-x offset-y blur spread color;
- Offset-X: Horizontal position. Positive moves right, negative moves left.
- Offset-Y: Vertical position. Positive moves down, negative moves up.
- Blur: How soft the shadow edges are. Higher = softer.
- Spread: How much the shadow expands. Positive grows, negative shrinks.
- Color: Shadow color, usually a semi-transparent black like rgba(0,0,0,0.1).
Guessing these values is tedious. The visual generator lets you see the result as you adjust each value.
How to Design Box Shadows Visually
Open the box shadow generator at dotsapps.com. You see a preview card with a shadow underneath it. Adjust the sliders:
- Drag offset X and Y to position the shadow.
- Increase blur for a softer, more diffused shadow.
- Adjust spread to make the shadow larger or smaller than the element.
- Pick a color and set the opacity.
The CSS code updates in real time. When it looks right, copy the code.
Popular Box Shadow Styles
Here are common shadow styles used in modern web design:
Subtle card shadow:
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
Medium elevation:
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
Floating card:
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
Sharp bottom shadow:
box-shadow: 0 2px 0 rgba(0,0,0,0.08);
Colored glow:
box-shadow: 0 0 20px rgba(59,130,246,0.5);
You can also add inset shadows for an inner shadow effect — useful for input fields and pressed buttons.
Box Shadow Best Practices
Follow these tips for professional-looking shadows:
- Use subtle shadows. Barely visible shadows look more natural than heavy, dark ones.
- Use rgba colors with low opacity (0.05–0.15) for soft, natural shadows.
- Layer multiple shadows for depth. Use a small, sharp shadow plus a large, soft shadow.
- Match your lighting direction. Keep shadow offset consistent across your design (usually light from top).
- Test in dark mode. Shadows are less visible on dark backgrounds. You may need brighter shadows or borders instead.
How to Do It: Step-by-Step
- 1
Open the free CSS Box Shadow Generator at dotsapps.com.
- 2
Adjust offset X and Y to position the shadow.
- 3
Set blur radius for softness and spread for size.
- 4
Choose a shadow color and opacity.
- 5
Copy the generated CSS code and paste it into your stylesheet.
Frequently Asked Questions
Can I add multiple box shadows in CSS?
Yes. Separate multiple shadows with commas: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06); Layered shadows look more natural.
What is an inset box shadow?
Adding the 'inset' keyword creates an inner shadow instead of an outer one. It makes elements look pressed in or recessed. Example: box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
Do box shadows affect page performance?
Slightly. Large blur values on many elements can slow down rendering, especially on mobile. Keep blur radius reasonable and avoid animating box-shadow — animate opacity or transform instead.
What is the difference between box-shadow and drop-shadow?
box-shadow applies to the element's rectangular box. The CSS filter drop-shadow() follows the actual shape of the element, including transparent areas. Use drop-shadow for irregular shapes.
Ready to Try It?
CSS Box Shadow Generator is free, private, and works right in your browser. No sign-up needed.
Open CSS Box Shadow Generator