CSS Box Shadow Generator

Box Shadow CSS Property

The box-shadow property is a CSS3 property that allows you to create a shadow effect for almost any element of a web page. It is similar to the Drop Shadows effect in Photoshop, using this property it creates the illusion of depth on 2-dimensional pages.

Using the box-shadow property, you can add one or more shadows to an element. A shadow is a copy of an element offset by a specified distance. Shadows can be external or internal, blurry or flat, they can also follow the contours of blocks with rounded corners - using the border-radius property. Using the keyword inset, shadows are created inside the element, making the element visually voluminous or depressed.

Syntax

The property takes on a composite value of five different parts: horizontal offset, vertical offset, blur, spread and shadow color. In addition, you can specify whether the shadow is external or internal by using the keyword inset.

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

Unlike other properties, such as border, which can be divided into sub-properties (border-width, border-style, etc.), the box shadow CSS property stands alone. Furthermore, the order in which you write the property values is important (except the inset keyword, which can be at the beginning or end.)

Horizontal Offset (X-axis)

The first value offset-x, shifts the shadow along the X axis. A positive value will shift the shadow to the right, and a negative value - to the left.

.box1 {
   box-shadow: 10px 0px 2px 0px rgba(128, 0, 0, 1);
}
.box2 {
   box-shadow: -10px 0px 2px 0px rgba(128, 0, 0, 1);
}

Vertical Offset (Y-axis)

The second value offset-y, shifts the shadow along the Y axis. A positive value will shift the shadow down, and a negative value - up.

.box3 {
   box-shadow: 0px 10px 2px 0px rgba(128, 0, 0, 1);
}
.box4 {
   box-shadow: 0px -10px 2px 0px rgba(128, 0, 0, 1);
}

Blur

The third value - blur, is the radius of the shadow blur, see how it works on the box shadow generator above. A value of 0 means that the shadow will not be blurry at all, the edges and sides will be absolutely clear. The higher the value, the more blurry the shadow will become. Negative values are not allowed.

.box5 {
   box-shadow: 0px 0px 5px 0px rgba(128, 0, 0, 1);
}
.box6 {
   box-shadow: 3px 3px 5px 0px rgba(128, 0, 0, 1);
}

Spread

The fourth value - spread, represents the size of the shadow or the distance from the shadow to the element. With a positive value, the shadow will increase, go beyond the element. A negative value will reduce and compress the shadow.

.box7 {
   box-shadow: 0px 0px 5px 5px rgba(128, 0, 0, 1);
}
.box8 {
   box-shadow: 3px 3px 5px 5px rgba(128, 0, 0, 1);
}

Color

The shadow color can be absolutely any color and can be written in different formats available in CSS (HEX, RGB, RGBA, etc.), we use RGBA, so that you can set the opacity level of the shadow.

.box9 {
   box-shadow: 0px 0px 5px 5px #638253;
}
.box10 {
   box-shadow: 3px 3px 5px 0px rgba(0, 128, 0, 1);
}

Inset

The inset value determines the position of the shadow. By default, it is not specified, which means that the shadow will be on the outside of the element. In order for the shadow to be inside the element, you can add the inset keyword at the beginning or end of the property.

.box11 {
   box-shadow: inset 0px 0px 5px 5px #638253;
}
.box12 {
   box-shadow: inset 3px 3px 5px 0px rgba(0, 128, 0, 1);
}

Multiple Shadows

With the CSS box-shadow property, you can add multiple shadows to an element. To add multiple shadows, just write them in a single property, separated by commas. Or, just use the generator above ... it's so much easier!

.box13 {
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3),
			  -23px 0 20px -23px rgba(0, 0, 0, .8),
			  23px 0 20px -23px rgba(0, 0, 0, .8),
			  inset 0 0 40px rgba(0, 0, 0, .1);
}
.box14 {
  box-shadow: 6px 6px #989898, 12px 12px #6c6666;
}

.box15 {
  box-shadow: 0 0 0 1px #CCCCCC,
			  0 -20px 0 -10px #00FFFF,
			  20px 0 0 -10px #DC143C,
			  0 20px 0 -10px #006400,
			  -20px 0 0 -10px #FF00FF;
}
.box16 {
  box-shadow: -15px -15px 2px -5px rgba(160,82,45,.5),
			  -15px 15px 2px -5px rgba(0,255,255,.5),
			  15px -15px 2px -5px rgba(255,0,0,.5),
			  15px 15px 2px -5px rgba(255,255,0,.5);
}

.box17 {
  box-shadow: 0 0 0 7px #60B88D,
			  0 0 0 14px #90CDAF,
			  0 0 0 21px #BFE3D1;
}
.box18 {
  box-shadow: -20px 20px 0 -17px #fff,
			  20px -20px 0 -17px #fff,
			  20px 20px 0 -20px #c27153,
			  0 0 0 2px #c27153;
}

CSS References Used

CSS Property

box-shadow

CSS Property

border-radius

CSS Property

border

CSS Data Type

<color>

CSS Data Type

<length>

CSS Function

rgba