About CSS Box Shadow Generator
What is a CSS Box Shadow Generator?
The CSS Box Shadow Generator lets you visually design box shadows and instantly copy the ready-to-use CSS. Adjust offset, blur, spread, color, and opacity for each layer — no manual trial-and-error needed.
Understanding Box Shadow Properties
- Offset X / Offset Y: Horizontal and vertical distance of the shadow from the element. Negative values move the shadow left or up.
- Blur: Higher values produce a softer, more diffuse shadow. Zero creates a sharp, hard-edged shadow.
- Spread: Expands or shrinks the shadow. Positive values make it larger than the element; negative values shrink it.
- Color & Opacity: The shadow color. Use low opacity for subtle depth effects.
- Inset: Moves the shadow inside the element border, creating a pressed or carved appearance.
Multiple Shadow Layers
CSS allows multiple comma-separated shadows on a single element. Layering a tight sharp shadow with a large diffuse one produces realistic depth — a common technique in modern design systems.
How to Use
- Pick a preset or start from scratch with Add Layer.
- Adjust the sliders and color picker for each layer in real time.
- Change the preview background to check contrast against different surfaces.
- Copy the generated CSS and paste it directly into your stylesheet.