How to Duplicate Elements Using CSS3 Box Shadows

Contributing Editor

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

demonstration

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:

  1. inset: (optional) if defined, the shadow will appear inside the element
  2. horizontal: the x distance from the element
  3. vertical: the y distance from the element
  4. blur: (optional) the blur radius, i.e. 0 for no blur
  5. 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
  6. 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…

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.codeconquest.com/ Charles @ CodeConquest.com

    Web designers just love pointless CSS don’t they?

    • http://niteodesign.com Blake Petersen

      Web designers do, web developers don’t.

    • http://www.trivial.ly Nicholas Johnson

      This is nice CSS. Box-shadow is going to be one of the most important css attributes in the front end developers armory over the next few years. The spec is so open, we haven’t even begun to touch on what it can do. It’s not just for dropshadows.

      If you’re interested I created a series of entertaining online exercises covering the current spec. It’s work in progress.

      http://www.css3superheroes.com/box_shadow

  • Daniel

    Well, I think pointless CSS like this gives us a better understandig of CSS for more important stuff.

    • http://www.dominical.biz Ben

      Agreed Daniel. I think that mastery of the full available CSS palette is the objective. Whether we use it, and how we apply it is up to our own creativity. Craig, thanks for the insight into this new puddle of paint for my palette. I’ll see what I can do with it.

  • martuanez

    Pointless until someone finds a good use =)

  • http://www.casasdealquilerencuba.com Yosvany

    Will be used, don’t worry.

  • Dinesh

    But it is sure that the page will take time to load itself….even there isn’t img . Even text shadow should be avoided for better loading result.

  • http://jenswebstek.nl Jen

    @ daniel; box-shadow: inset is used in the default/shadowdom-css styling the browsers give to buttons… so there’s a usecase. Get rid of that cyan blue IE gives to the hover state.

    Didn’t knew you could do multiple shadow’s tho.. nice one Craig.

  • http://www.joshmoncrieff.com Josh

    Well that’s certainly a use for box-shadow I haven’t seen. Pointless? Only until someone uses it to achieve something other than a proof of concept. I’ll definitely be having a play with this one.
    Thanks Craig!

  • http://free-shoutbox.net/ free shoutbox

    excellent tutorial. currently I am learning complicated CSS and I really enjoy learning it. this tutorial will help me much learning CSS. thanks for sharing it.

  • http://www.trivial.ly Nicholas Johnson

    It’s a nice effect. I’d enjoy it even more if you animated the box shadow offset just a little. Cute.