HTML5 and CSS3 logo

Shadow Settings

Offset X
Offset Y
Blur Radius
Spread Radius
Shadow Color
Opacity %
Inset

Box Shadow CSS

CSS Box Shadow Generator with Live Preview

Create CSS box shadows with a live preview. Adjust X and Y offsets, blur, spread, color, opacity, and inset, then copy the CSS.

How to use this tool

Design a CSS box shadow while seeing the effect on a preview card. Each control maps to part of the box-shadow property, so you can tune depth without guessing the final values.

  1. 1

    Set the shadow position

    Adjust the horizontal and vertical offsets to move the shadow around the element.

  2. 2

    Tune blur and spread

    Increase blur for a softer edge and use spread to grow or contract the shadow area.

  3. 3

    Choose color and opacity

    Pick a shadow color, adjust its transparency, and enable inset for an inner shadow.

  4. 4

    Copy the CSS

    Review the live preview, then copy or download the generated box-shadow declaration.

Box Shadow Generator FAQ

What is a Box Shadow Generator?
A Box Shadow Generator is a tool that helps you create and customize CSS box-shadow properties visually without writing code manually.
What can I control in a box shadow?
You can adjust horizontal and vertical offset, blur radius, spread, color, and opacity to create different shadow effects.
Can I preview the shadow before using it?
Yes, the tool provides a live preview so you can see changes in real time before copying the CSS code.
Can I use the generated CSS in my project?
Yes, you can copy the generated CSS code and use it directly in your website or application.
Is this tool safe to use?
Yes, all processing is done in your browser, and no data is stored or shared.