To create a box shadow, set the offsets, blur, spread and color in the Box-Shadow Generator and copy the CSS. You can also switch on the inset option for an inner shadow.
Follow along with the free Box-Shadow Generator, which runs in your browser, or browse more tools in this category.
How to use the Box-Shadow Generator
- Set horizontal and vertical offsets.
- Adjust blur and spread.
- Choose the color, ideally semi-transparent.
- Copy the CSS.
Worked example
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) gives a soft shadow below an element.
Tips and common mistakes
- Low-opacity shadows look more natural.
- Larger blur with a small offset creates a soft glow.
- Layer two shadows for more depth.
Frequently asked questions
What does spread do?
It grows or shrinks the shadow before blurring.
What is inset?
It draws the shadow inside the element.
Is it private?
Yes.