Css3 Cross browser box shadow generator

The Css3 Box Shadow Generator is the tool to quickly generate css3 box-shadow for all browser

Selects the Css Shadow parameter:

Blur Radius
Spread Radius
Shadow Color and Alpha

Drag the yellow circle to change the Css Shadow position:

Drag Me

Copy your (Css Shadow) generated code:

Css3 Generated:
Browser support:
chrome icon10.0 4.0 -webkit-
internet explorer icon9.0
firefox icon4.0 3.5 -moz-
safari icon5.1 3.1 -webkit-
opera icon10.5

Want to know more about how to use box-shadow css to beautify your projects?

Among all the visual effects introduced in the css3, box-shadow and border-radius property are the most useful and significant. Their use has reduced the appeal of background images and hacks, allowing a cleaner and optimized code; in fact, before their introduction, in order to be able to make a simple container with shadow intricate div structures or tables were necessary and that weighed down the overall project, making web designer very angry :).

How does box-shadow?

Here is a basic example of how to use the box-shadow:

box-shadow: 3px 3px 15px 3px #333333; Of these four values just described only the first two are mandatory, while the value (blur radius) and (spread radius) can be omitted; in this case their value will be equal to 0 that is the default value.

We close our rule specifying the shadow color: (#333333).

If we wanted to also use a transparency value for our shadow, we can simply convert our value (HEX) #333333 or in (RGBA) = rgb + Alpha (which expresses the value of transparency).

The same syntax with the values expressed in rgba becomes:

box-shadow: 3px 3px 15 px 3px rgba(51,51,51,.5);

where the first three numbers (51,51,51) express the R G B values while (.5) indicates the percentage of transparency, in this case 50%.


Let's see a practical example of use.

This is the code used:

.box-1{
  height: 110px;
  width: 300px;
  border: 1px solid #c0c0c0;
  background: #ececec;
  margin: 0 auto;
  margin-bottom: 30px;
  margin-top: 24px;
  -webkit-box-shadow: -8px 8px 21px 0px rgba(0, 0, 0, 0.42);
  -moz-box-shadow: -8px 8px 21px 0px rgba(0, 0, 0, 0.42);
  box-shadow: -8px 8px 21px 0px rgba(0, 0, 0, 0.42);
}

In order to ensure maximum cross-browser compatibility, you must use the following lines of code: -moz-box-shadow: that provides browser support from Firefox versions prior to 4.0 while; -webkit- extends support to the Safari browser from version 5.

Use the keyword inset

Using the value (inset) for the box-shadow, a shadow lies not outside but inside our box, as in the following example:

This is the code used:

.box-2{
  height: 110px;
  width: 300px;
  border: 1px solid #c0c0c0;
  background: #ececec;
  margin: 0 auto;
  margin-bottom: 30px;
  margin-top: 24px;
  -webkit-box-shadow: -8px 8px 21px 0px rgba(0, 0, 0, 0.42) inset;
  -moz-box-shadow: -8px 8px 21px 0px rgba(0, 0, 0, 0.42) inset;
  box-shadow: -8px 8px 21px 0px rgba(0, 0, 0, 0.42) inset;
}

you can also specify more shadows for the same object which produced some interesting effects such as the following:

This is the code used:

.box-3{   height: 110px;
  width: 300px;
  background: #ececec;
  margin: 0 auto;
  margin-bottom: 30px;
  margin-top: 64px;
  -moz-box-shadow: 0 0 20px #000, 20px 15px 30px #ffff94, -20px 15px 30px #0f0, -20px -15px 30px #7000ff, 20px -15px 30px #f00;
  -webkit-box-shadow: 0 0 20px #000, 20px 15px 30px #ffff94, -20px 15px 30px #0f0, -20px -15px 30px #7000ff, 20px -15px 30px #f00;
  box-shadow: 0 0 20px #000, 20px 15px 30px #ffff94, -20px 15px 30px #0f0, -20px -15px 30px #7000ff, 20px -15px 30px #f00;
}
Contact