How to Duplicate Elements Using CSS3 Box Shadows

Take a look at the following demonstration page in Firefox, Chrome, Safari, Opera, IE9 or IE10:

The circles are created using DOM elements rather than canvas, SVG, Flash or another alternative.

Question: without looking at the source code, how many DOM elements are required?

The answer should be obvious if you read the title of this article. Just one element is used; in this case, it’s a single DIV with the ID ‘element’. It’s actually an invisible circle since its color matches the background.

The other circles are defined in CSS using a little-known feature of the box-shadow property. It permits you to duplicate the shape of any element in any location, at any size, in any color any number of times. The property has six arguments:

inset: (optional) if defined, the shadow will appear inside the element
horizontal: the x distance from the element
vertical: the y distance from the element
blur: (optional) the blur radius, i.e. 0 for no blur
spread: (optional) the distance the shadow spreads, i.e. 1px extends the shadow 1 pixel in all directions so it’s 2px wider and taller than the parent element
color: the shadow color

We can use the horizontal and vertical distances for relative positioning. The spread can be positive or negative to make the shadow larger or smaller than the parent element. Since multiple shadows can be defined, we can duplicate the original shape any number of times, e.g.



#element

{

	width: 100px;

	height: 100px;

	background-color: #ccc;

	border-radius: 50px;

	box-shadow: 120px    0px 0  15px #f00,

				-60px  104px 0   0px #0f0,

				-60px -104px 0 -15px #00f;

}

example box-shadow

Remember your shape can have also :before and :after pseudo elements with their own box-shadows.

Next question: is this useful?

That’s more tricky to answer, but it’s an option to consider when developing pages with repeating shapes. It could certainly help reduce page weight.

Obviously, it’s possible to take the technique to extremes and create whole scalable graphics using box-shadows, e.g.

However, this is fairly pointless given that a PNG or SVG is likely to be more efficient and easier to create. But let me know if you use the repeating box-shadow technique for anything interesting…

Frequently Asked Questions about CSS3 Box Shadow Elements

How can I create multiple shadows on a single element using CSS3?

Creating multiple shadows on a single element using CSS3 is quite simple. You can achieve this by specifying each shadow as a comma-separated list. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color. For example, you can use the following code:

box-shadow: 3px 3px red, -1em 0 0.4em olive;
In this example, the first shadow is a 3px x 3px red shadow, and the second shadow is a -1em x 0 olive shadow with a blur radius of 0.4em.

Can I use CSS3 box-shadow property to create a border effect?

Yes, you can use the CSS3 box-shadow property to create a border effect. This can be achieved by setting the fourth length to a value different than zero. The fourth length is the spread radius. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element). Here’s an example:

box-shadow: 0 0 0 10px #888;
This will create a 10px grey border around your element.

How can I create an inner shadow using CSS3 box-shadow property?

To create an inner shadow, you can use the ‘inset’ keyword in the box-shadow property. This changes the shadow from an outer shadow (outset) to an inner shadow. Here’s an example:

box-shadow: inset 5px 5px 10px #000;
This will create a 5px x 5px black inner shadow with a blur radius of 10px.

Is it possible to animate the box-shadow property?

Yes, it is possible to animate the box-shadow property using CSS3 animations or transitions. You can animate the color, blur radius, spread radius, and offset of the shadow. Here’s an example of a simple animation that changes the shadow color:

@keyframes shadow-color {
from {box-shadow: 10px 10px 10px red;}
to {box-shadow: 10px 10px 10px blue;}
}
This animation will gradually change the shadow color from red to blue.

How can I use the box-shadow property to create a depth or 3D effect?

You can create a depth or 3D effect by using multiple shadows with different offsets and colors. By layering multiple shadows of different sizes and colors, you can create the illusion of depth. Here’s an example:

box-shadow: 3px 3px 5px #000, 6px 6px 5px #0f0, 9px 9px 5px #00f;
This will create a 3D effect with three layers of shadows in black, green, and blue.

Can I use the box-shadow property on rounded elements?

Yes, the box-shadow property works on all elements, including those with rounded corners. The shadow will follow the shape of the element, including any border-radius that is applied. Here’s an example:

border-radius: 50%;
box-shadow: 10px 10px 5px #000;
This will create a circular element with a shadow.

How can I control the blur and spread of the shadow?

The third and fourth values of the box-shadow property control the blur and spread of the shadow. The third value is the blur radius. The larger this value, the more the shadow will be blurred. The fourth value is the spread radius. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. Here’s an example:

box-shadow: 10px 10px 20px 5px #000;
This will create a shadow that is offset 10px to the right and 10px down, has a blur radius of 20px, and a spread radius of 5px.

Can I use the box-shadow property to create a glow effect?

Yes, you can create a glow effect by using a large blur radius and a bright color. Here’s an example:

box-shadow: 0 0 30px #f00;
This will create a red glow around the element.

How can I create a shadow that is only on one side of the element?

You can create a shadow that is only on one side of the element by using a large spread radius and offsetting the shadow in the direction you want. Here’s an example:

box-shadow: 10px 0 5px -2px #000;
This will create a shadow that is only on the right side of the element.

Can I use the box-shadow property with transparent elements?

Yes, the box-shadow property works with transparent elements. The shadow will be visible around the shape of the element, even if the element itself is fully transparent. Here’s an example:

background-color: transparent;
box-shadow: 10px 10px 5px #000;
This will create a shadow around a transparent element.