Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

CSS Box Shadows

• I Know You’ll Read This!

  This is the kind of box you can create with this tutorial. You can use it just because it looks nice, or use it to draw attention to a new product, or new content, or to frame quick tips, quotes, instructions, or anything else you like.

The really cool stuff:

• No images were used. Not for the shadow or background. Yet, the whole thing looks like a well-crafted image.
• The box will expand or contract vertically to the amount of text inside.
• The box is responsive site friendly.

The background is a gradient color that uses four different color stops, no background image is used. The corner shadows are before and after pseudo-elements tied to a list item that have been slightly rotated and skewed. The reason for using list items is so only the shadows are rotated and skewed, not the box and content inside the box.

If all this sounds confusing, just wait until you see the CSS code! Don't fret one little bit though, it's copy and paste easy. Seriously.

There is a good amount of CSS that makes this happen, so to keep this tutorial user-friendly I’m not going to explain every line of code. You can copy and paste the code, and I’ll just explain the parts I think you may want to change. I recommend saving the CSS as an external CSS file.

OK, let’s take a look at the CSS code first…

ul.shadowBox 
{position: relative;
z-index: 1; 
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;}

ul.shadowBox li 
{position: relative;
max-width: 400px;
padding: 8px;
border: 1px solid #B89B45;
margin: 30px auto;
background: -webkit-linear-gradient(left top, #DECFA3, #E7DCBC, #E0D6B6, #D0BC7D);
background: -o-linear-gradient(bottom right, #DECFA3, #E7DCBC, #E0D6B6, #D0BC7D);
background: -moz-linear-gradient(bottom right, #DECFA3, #E7DCBC, #E0D6B6, #D0BC7D);
background: linear-gradient(to bottom right, #DECFA3, #EBE4CF, #E0D6B6, #D0BC7D);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;}

ul.shadowBox li:before,
ul.shadowBox li:after 
{content: '';
z-index: -1;
position: absolute;
left: 12px;
bottom: 12px;
width: 70%;
max-width: 200px; /* avoid rotation causing ugly appearance at large container widths */
max-height: 100px;
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-12deg) rotate(-8deg);}

ul.shadowBox li:after 
{left: auto; right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(12deg) rotate(8deg);}

As I said, the CSS may look intimidating, but that’s only because it is.

So let’s tame that beast. It’s probably going to be easier than you may be thinking. Here are the things you’ll most likely want to change…

• Line 11 sets the width of the box. If you adjust the width in line 11 you mayor may not have to adjust the max-width in line 31. If you make the box smaller, 200 pixels is about as small as you can go without losing the lifted corner effect. If you make it that small, you’ll probably need to adjust the max-width on line 31 to a larger size. Yes, it’s counter-intuitive.

  It’s generally going to adjust well to a larger size, but if the max-width on line 11 is big enough and the max-width on line 31 is too big, you’ll start seeing some unsightly white angles cutting into the shadow. If you see that, the max-width needs to be made smaller.

• Line 12 is where you set the padding (the distance the text is from the edge of the box).
• Line 13 sets the border around the box. Change the width, color, and style as you please.
• Line 14 sets the margin between the box and the surrounding content. I have it set so there are 30 pixels of space on the top and bottom, and the box is centered within it’s containing element.
• Lines 15-18 set the gradient direction and colors. The gradient property is a separate tutorial, so I’m not going to repeat it here. For now, I’ll just make the following point:

  Whatever colors you use, be sure to repeat them in each line (15, 16, 17, and 18). The standard CSS is line 18. Lines 15-17 are for older browsers that can’t parse CSS3. For those interested: Gradient Colors Tutorial.

You can add other styles too. For example, if you want to change the font family or font size, add them to the second chunk of code (after the padding on line 12, for example), or you could add those styles inline to the <ul> element.

Now let’s look at the HTML…

Pretty simple! It’s just an unordered list with the shadowBox class added. Place your content after the list item. Once your content is in place, just close out the list like you would any list.

If you add another <li> (list item) to the HTML unordered list, it will create another box under the first one, so you can create multiple boxes if you have a reason to do so. Here’s an example:

• This and That

  If a chicken is brave, is it still a chicken?

• The Other Thing

  Bob White is so vain. He always thinks the birds are calling his name.

Nice text boxes, especially for not using any images, don’t you think? Because you can change the color scheme to complement your site, they’re very versatile. And because there are no images used, they load as fast as text!

If you prefer, you could replace the gradient background code (lines 15-18) with the background-color property to have a solid colored background. For example:

• I hope you enjoyed this tutorial!