• Home
  • CSS Box Shadow Generator

CSS Box Shadow Generator

This CSS box shadow generator will help you learn and design shadows for your containers or boxes on your webpages. The CSS code for shadows requires four values, they are: Horizontal Length, Vertical Length, Blur Radius and Shadow Color.

Update This generator has been updated to allow for multiple shadows to be added.

Shadow Preview
Background Color:
Container Color:
Shadow Options

3px

3px

2px

0px

1


Multiple Shadows
  • 1
  • +
CSS Code

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);
}
Box 1
Box 2

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);
}
Box 3
Box 4

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);
}
Box 5
Box 6

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);
}
Box 7
Box 8

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);
}
Box 9
Box 10

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);
}
Box 11
Box 12

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;
}
Box 13
Box 14

.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);
}
Box 15
Box 16

.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;
}
Box 17
Box 18

CSS References Used

CSS Propertybox-shadow
CSS Propertyborder-radius
CSS Propertyborder
CSS Data Type<color>
CSS Data Type<length>
CSS Functionrgba