CSS3 Box with Shadow

Create box shadow with CSS3 box-shadow property

Creative CSS

Designing with CSS – Box Shadow

Box-shadow is one of CSS3′s best new features. CSS3 gives you a nice box shadow with box-shadow property.

The property takes 3 lengths and a color as it’s attributes, the lengths are:

  1. the horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box;
  2. the vertical offset, a negative one means the box-shadow will be on top of the box, a positive one means the shadow will be below the box;
  3. the blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.

The shadow should be following curved corners created with border-radius property. Box shadows may also be used with the ::first-letter pseudo-element, but not the ::first-line pseudo-element.

CSS3 Generator

If you are not very comfortable with CSS, or would like to have CSS codes auto-generated for you to save time, here is a useful and handy tool called CSS3 Generator. This simple tool created by Randy Jensen could be used for most basic design elements like rounder corners, box-shadow, text-shadow, etc on your webpages. It will create some cross-browser CSS3 code based on whatever values you want.

In the previous article I illustrated generation of code for rounded corners using border-radius property of CSS3 with the help of this tool.

In this article I shall illustrate generation of code for box shadow using box-shadow property of CSS3 with the help of this tool. The procedure is simple. You chose your design element from the drop-down menu, enter your values, and get your auto-generated code for your project.

Box Shadow

Your Code:

-webkit-box-shadow:10px 8px 3px;
-moz-box-shadow:10px 8px 3px;
box-shadow:10px 8px 3px; 
Note: The CSS3 Generator doesn’t add the color attribute in the code. Without the color attribute the box shadow won’t be rendered. See the correct code below.

Browser Compatibility:

Firefox 3.5+ Chrome 4.0+ Safari 3.1+ Opera 10.5+

Example of Box with Shadow

This example uses the CSS3 box-shadow property and currently it will not work in all browsers.

CSS Code:

.box {color:#807970;background:#f9fafa;border:1px solid #dbe1e6}
.corner {border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px}
.boxshadow {box-shadow:10px 10px 5px #888;-moz-box-shadow:10px 10px 5px #888;-webkit-box-shadow:10px 10px 5px #888}


<div class="box corner boxshadow">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 


CSS3 Box with Shadow
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
CSS3 Box with Rounded Corners and Shadow
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Browser Support
The text shadow works in Firefox 3.1 (Alpha), Chrome 4.0+, Webkit (from Safari 3+), Opera 10.5+.

CSS3 Generator
W3C CSS3 Backgrounds and Borders Module
This draft contains the features of CSS level 3 relating to borders and backgrounds.

Box Shadow
Web Host for your WordPress Blog
If you are looking for a web host that will provide hosting environment for WordPress, BlueHost is one of the best choices. My website and blog are hosted by BlueHost.

Click Here to Signup for BlueHost
Small Business Website Design
Get a professionally designed special custom five-page website ideal for small business that need an online presence as well as personal sites or informational sites at an amazing price of only $125.
Visit our website to learn more about Small Business Website Design

Previous Article
Next Article
CSS3 Box with Rounded Corners
Create rounded corners with CSS3 border-radius property
CSS3 Text with Shadow
Create text shadow with CSS3 text-shadow property
Related Posts with Thumbnails
Admin/Author Admin/Author: Subrato Paul, owner of GoldenTwine Informatics founded in April 2003, lives in Kolkata, India. He is a freelance website designer, Internet marketer, social media enthusiast, and blogger. He writes in his blogs and as a guest writer about marketing and social media, eCommerce, website design and development, and his website.
RSSDid you like this article? If you're new to goldenTwine blog, you may want to
Subscribe to RSS feed: | Comments RSS | Email Subscription
Social Media:
Short Link: https://wp.me/pPMoR-lW | Thanks for visiting!

One Comment

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Notify me of followup comments via e-mail. You can also subscribe without commenting.

This site uses Akismet to reduce spam. Learn how your comment data is processed.