How to use CSS Box Shadow Generator
- Move the sliders for offset, blur and spread.
- Pick a shadow color and opacity.
- Copy the CSS and paste it into your stylesheet.
About this tool
A box shadow is written as offset-x, offset-y, blur radius, spread radius and color. A larger blur makes the edge softer, a positive spread grows the shadow and an inset shadow draws inside the element. Layered, low-opacity shadows usually look more natural than one dark shadow.
The code uses rgba colors so you can tune the opacity independently of the color.
Frequently Asked Questions
- What do the four numbers in box-shadow mean?
- Horizontal offset, vertical offset, blur radius and spread radius, followed by the color.
- Does box-shadow affect layout?
- No. Shadows are drawn outside the box model and never change the size or position of elements.
Related tools
- CSS Text Shadow GeneratorAdd depth or a glow to text and copy the CSS.
- Glassmorphism CSS GeneratorBuild a frosted glass card and copy the CSS.
- CSS Border Radius GeneratorRound each corner separately and copy the CSS.
- CSS Gradient GeneratorDesign a gradient visually and copy the CSS background.
- CSS Button GeneratorCreate a styled button and copy its CSS, including the hover state.
- Custom Scrollbar GeneratorDesign a scrollbar that matches your site and copy the CSS.