CSS Box Shadow Generator

Box

Circle

Header

Horizontal Offset: 3px

Vertical Offset: 3px

Blur: 10px

Spread: 3px

Background Color

Box Color

Shadow Color

Inset

CSS
-webkit-box-shadow: 3px 3px 10px 3px #ddd;
-moz-box-shadow: 3px 3px 10px 3px #ddd;
box-shadow: 3px 3px 10px 3px #ddd;

Similar CSS Tools

See All

CSS Loader Generator

Generate fancy CSS loaders by specifying the type, color and size of the loading indicator

Open

CSS Text Glitch Effect Generator

Generate CSS text glitch effect and create fancy text animations by using pure CSS

Open

CSS Clip Path Generator

Generate CSS clip path with different patterns and use clip-path property in your projects

Open

What is Online CSS Box Shadow Generator?

CSS Box Shadow Generator is a free online tool for generating CSS box shadows in any color and size. You can create the box shadow you need by tuning the parameters, preview it as a box, circle or header and get the CSS code directly. Here is how a box shadow looks in HTML.

How box-shadow looks in HTML

There are different parameters you must set in CSS box-shadow property. These are the following. Optional parameters are showed in parenthesis.

box-shadow: (inset) h-offset v-offset (blur) (spread) color;

Inset: "inset" is an optional parameter works like a flag and it changes the shadow from outer to inner. By default, shadow is outset, and you don't need to write anything to set it in CSS. Just use "inset" to change its default position.
Horizontal Offset: Horizontal offset or h-offset is the distance of shadow from center in x-axis. It's a required parameter. It may be either negative or positive. Negative values put the shadow to the left of the box, while positive put the shadow to the right.
Vertical Offset: Vertical offset or v-offset is the distance of shadow from center in y-axis. It's a required parameter. It may be either negative or positive. Negative values put the shadow above the box, while positive values put the shadow below.
Blur: Blur is the amount of blur that will be applied to shadow. It has to be zero or positive. Blur is an optional parameter. If you don't set it, it will be calculated as zero.
Spread: Spread is the radius of the shadow spread that will be subtracted or added to shadow itself. If its value is negative, shadow will be smaller, vice versa. Spread is an optional parameter. If you don't set it, it will be calculated as zero.
Color: It determines the color of the shadow. It's a required parameter.

How to use Online CSS Box Shadow Generator?

You can generate a CSS box shadow by following these steps.

First, set the sizes of h-offset, v-offset, blur and spread in pixels.
Determine the colors for background, box, and shadow. Background and box colors are for preview-only. Shadow color will be used in the CSS code generated.
You can enable inset shadow by activating the checkbox if needed.
There are 2 preview modes. One is box and other is header. You can check the generated box shadow in both modes according to your needs.
You can copy the CSS code generated manually or by using the button "Copy CSS".