CSS only rainbow

16 September 2011

When discovering the spread parameter of box-shadow, I concluded that it's now possible to stack as many "borders" to elements as you like.

The spread parameter is supported by a lot of browsers:

  • Chrome 9+
  • Safari 3.2+
  • Firefox 3.5+
  • Internet Explorer 9


The rainbow



The HTML:

<div class="rainbow"></div>

And the CSS:

.rainbow {
  margin: 80px;   /* the shadows are added to the boxmodel, so you need to preserve some extra space */
  width: 200px;
  height: 150px;
  border-radius: 150px 150px 0px 0px;
  box-shadow:
    0px 0px 0px 10px #63319C,
    0px 0px 0px 20px #319CFF,
    0px 0px 0px 30px #0000FF,
    0px 0px 0px 40px #00FF00,
    0px 0px 0px 50px #FFFF00,
    0px 0px 0px 60px #FF0000;
  position: relative;
}
.rainbow:after {
  content: "";
  display: block;
  width: 100%;
  padding: 60px;       /* enter the size if the biggest shadow. 60px in this case */
  height: 1px;
  background: #FFFFFF; /* same color as the background of the page */
  position: absolute;
  bottom: -60px;       /* enter the negative size if the biggest shadow. */
  left: -60px;         /* same here */
}


The basics of box-shadows

When defining a box-shadow, you can use five parameters. The first two are the shadow offset:

box-shadow: 0px 0px; /* shadow is centered on the element */

Then, there's the shadow size. A value of 0 creates a hard shadow and the higher the number, the "fuzzier" the shadow:

box-shadow: 0px 0px 10px; /* shadow with a size of 10 pixels */

The 3rd parameter is the spread value. This stands for the extra size that's added to the shadow:

box-shadow: 0px 0px 10px 10px; /* extra thick shadow */

And lastly there's the shadow color:

box-shadow: 0px 0px 10px 10px #FF0000; /* red shadow! */

Multiple shadows can be stacked by seperating multiple definitions with comma's:

box-shadow: 0px 0px 10px 10px #F00, 0px 0px 10px 20px #FF0;
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

0 comments

Please feel free to be the first to comment on this page!

By placing a comment you let me know i'm doing a good job. It doesn't have to be constructive, just a "awesome!" makes me really happy! You contribute to a better world!