Box Shadow Generator

Box shadow generator is a css tool used to shade html elements. You can get the view you want using the settings related to shading.


CSS Code

div {
   border: 2px solid #d54e21;
   background-color : #f3f6f8;
   box-shadow : #2e4453 1px 1px 1px 1px;

Box Shadow Generator

Box shadow feature is used to give a box element a shadow. This feature can be applied to all HTML elements came with CSS3.
Previously we used image editing programs to shadow the boxes. The box-shadow feature that came with CSS3 saved us from this trouble.

box shadow generator


Under normal conditions, the box shadow feature sets the shadow outside of the box. If you want to apply the shadow into the box, you must use the inset value.

box-shadow: inset color offset-x offset-y blur-radius spread-radius;

Box-shadow Properties

The Box Shadow feature takes six different parameters. The inset, blur radius, spread radius and color parameters other than the horizontal and vertical offset values are arbitrarily defined.

Property Description
inset This option, which is optional, specifies whether the shadow will be inside or outside the box.
color Sets the color of the shade. With RGBA you can get transparent shadows.
offset-x It determines the distance of the shade in the yard. Positive values move to the right side of the shadow box, while negative values move to the left of the shadow box. It is difficult to use.
offset-y It specifies the vertical distance of the shade. Positive values move over the shadow box while negative values move over the shadow box. It is difficult to use.
blur-radius It is used to blur the shadow to reveal a close-up image. The starting value is zero. The blur increases as the value moves away from zero, and sharper as the value approaches zero. Use is optional.
spread-radius It can enlarge or shrink the spread area of the shade. Use is optional.

Browser Support

4+ 3.1+ 3.5+ 10+ 9+ 2.1+ 3.2+