CSS Box Shadow Generator Tool

Simple Tool to generate CSS code for multi-layer shadows. You can tweak settings for each shadow element individually.

Select from Templates to quickly get started.

Click on Add Shadow to add more layers to shadow.
Adjust Color, Blur,Shread and Position from the side panel
Click On code to copy CSS

Keyboard Shortcuts:

Move Elements: Up / Down / Left / Right 
Blur: Shift + UP / Shift + DOWN
Spread: Shift + LEFT / Shift + RIGHT 
Layer: 1 to 7

When an object is stroked by light, it projects a shadow. This shadow has numerous and unique characteristics. If you are attempting to capture the delicacy of a true shadow with the help of box-shadow then, well, you’re just about unsuccessful. The box-shadow CSS property isn’t specifically engineered to encourage quality. It primarily produces a blurred outline of the object—you will amendment its offset, blur radius, spread, and color. We have a tendency to can’t get anyplace on the subject of expressing the complexities and nuances of shadows in the world.

But with an easy CSS property, we will expand our variety of choices. If we have a tendency to use superimposed box-shadows are able to get a lot of close management over however shadow exhibits.

box-shadow: 0 6px 6px rgba(0,0,0,0.2);

As compared to layered box-shadow, the default box-shadow effect will look slightly square in shape and a bit clumsy. The layered box-shadow can be achieved by generating multiple box-shadows where each shadow will be separated by commas and for every shadow, the offset and blur will be increased.

/* Default box-shadow */

.box {
  box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}

/*Gradually increase radius and offset when layering multiple shadows to create smooth box-shadow*/

.shadow1 {
  box-shadow: 
    0 1px 1px rgba(0,0,0,0.11),
    0 2px 2px rgba(0,0,0,0.11),
    0 4px 4px rgba(0,0,0,0.11),
    0 8px 8px rgba(0,0,0,0.11),
    0 16px 16px rgba(0,0,0,0.11);
}

To polish up the spread, distance, and sharpness of the shadow, this layering multiple shadow technique provides a good command to exhibit the shadow. Also, to generate a sizable spread of shadow you can add or remove the number of shadows.

However, if you need to keep the shadow strength somewhat the same then when the layers are increased, the alpha value should be decreased for each layer.

.shadow2 {
  box-shadow:
    0 1px 1px rgba(0,0,0,0.15),
    0 2px 2px rgba(0,0,0,0.15),
    0 4px 4px rgba(0,0,0,0.15),
    0 8px 8px rgba(0,0,0,0.15);
}

.shadow3 {
  box-shadow:
    0 1px 1px rgba(0,0,0,0.12),
    0 2px 2px rgba(0,0,0,0.12),
    0 4px 4px rgba(0,0,0,0.12),
    0 8px 8px rgba(0,0,0,0.12),
    0 16px 16px rgba(0,0,0,0.12),
    0 32px 32px rgba(0,0,0,0.12);
}

The above example shows that the alpha value is the same for all layers. But we can increase or decrease the alpha value for each layer depending on how much diffuse we want for the shadow. It’s easy to control both spread and sharpness by controlling the alpha and blur values. To change the concentration of depth, control the alpha value, and to change the blur radius of the shadow, control the blur value.

To create a more concentrated shadow below the object, the most inner shadow which has the least blur and offset will have the highest alpha value and its alpha value will decrease with each added layer. However, to create a more diffuse shadow, the most inner shadow will have the least alpha value.

.a-shadow-sharp {
  box-shadow:
    0 1px 1px rgba(0,0,0,0.25),
    0 2px 2px rgba(0,0,0,0.20),
    0 4px 4px rgba(0,0,0,0.15),
    0 8px 8px rgba(0,0,0,0.10),
    0 16px 16px rgba(0,0,0,0.05);
}

.a-shadow-diffuse {
  box-shadow:
    0 1px 1px rgba(0,0,0,0.08),
    0 2px 2px rgba(0,0,0,0.12),
    0 4px 4px rgba(0,0,0,0.16),
    0 8px 8px rgba(0,0,0,0.20);
}

The blur value is increased to create more spread with a hazy and softer effect.

.a-shadow-hazy {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.07),
    0 2px 4px rgba(0,0,0,0.07),
    0 4px 8px rgba(0,0,0,0.07),
    0 8px 16px rgba(0,0,0,0.07),
    0 16px 32px rgba(0,0,0,0.07),
    0 32px 64px rgba(0,0,0,0.07);
}

By separating blur radius and Y-offset we could manage the distance of the shadow and the object. Also, increase the offset for shorter or longer distances.

.shadow-shorter {
  box-shadow:
    0 1px 1px rgba(0,0,0,0.11),
    0 2px 2px rgba(0,0,0,0.11),
    0 4px 4px rgba(0,0,0,0.11),
    0 6px 8px rgba(0,0,0,0.11),
    0 8px 16px rgba(0,0,0,0.11);
}

.shadow-longer {
  box-shadow:
    0 2px 1px rgba(0,0,0,0.09),
    0 4px 2px rgba(0,0,0,0.09),
    0 8px 4px rgba(0,0,0,0.09),
    0 16px 8px rgba(0,0,0,0.09),
    0 32px 16px rgba(0,0,0,0.09);
}

One can use any of these combination techniques depending on which context you are working on. With the layered box-shadow, you can acquire the desired view and texture.