Box Shadow generator


The box-shadow property attaches one or more shadows to an element. It is a comma-separated list of shadows. For each of the 3 proposed shadows, you can select 4 lenghts, an optional color and an optional style (inset or not). Negative values are allowed for the X and Y offsets. Use the tabs to set multiples shadows.

Effects
Settings

Here you can customize the appearance of the result area.

Saved!
Reseted!


CSS Code to copy



Browser compatibility

To go further

The box-shadow property allows you to add a shadow effect to an html element, without the need of using CSS images or hacks.
Suppose you have an element identified MyDiv, defined as below:

<div id="MyDiv"> </div>

The box-shadow syntax works as follows:

#MyDiv {
    box-shadow: inset 5px 5px 5px 2px rgba(0,0,0,0.7);
}

The first parameter defines the orientation of the shadow, which can be either inward or outward from the element. The following two parameters determine the position of the shadow on the X axis (horizontal), and Y axis (vertival). The fourth parameter adds a blur effect, and the fifth, to determine the distance. Finally, the last parameter sets the color of the shadow. Using a rgba color instead of hexadecimal allows you to define the opacity of the shadow (fourth parameter of the rgba function).

Today, a large number of users use browser versions for which the box-shadow property was not standardized. For maximum compatibility, it is very important to add lines with browser prefixes (like -moz- for Mozilla, -webkit- for Chrome and Safari).

#MyDiv {
    -webkit-box-shadow: inset 5px 5px 5px 2px rgba(0,0,0,0.7);
    -moz-box-shadow: inset 5px 5px 5px 2px rgba(0,0,0,0.7);
    box-shadow: inset 5px 5px 5px 2px rgba(0,0,0,0.7);
}

Using a CSS generator like MakingCSS avoids entering each value for each prefix, and let you visualize the effect in real time.



Leave a suggestion