CSS3 Shadow Generator: My Top 3 and How to Create CSS Shadows

CSS3 is an acronym for Cascading Style Sheets. This is the third standardized version CSS available for formatting web pages and the new style elements available in CSS3 make it the most versatile way to add sophisticated and flashy styles to your pages without requiring major processing power. CSS3 is divided into different modules with each module adding new features as well as backward compatibility to ensure websites written using CSS1 or CSS2 still display correctly. If you want to learn to use cascading style sheets in your web pages,  the CSS and CSS3 Crash Course might be just what you’re looking for. This course contains over seventy eight lectures that will teach you what CSS and CSS3 are. You will learn basic CSS techniques and the course includes a step by step guide to help you build your first website.

One of the style elements available in CSS3 is the shadow element. The shadow element is a CSS element that can add a shadow to a selected area. This tutorial refers to three great websites that will automatically generate the CSS that generates shadow element for you.

CSS3 Drop Shadow Generator 0.12

The first shadow generator we’ll look at is the CSS Drop Shadow Generator 0.12 designed by Xavier Nayrac.

I chose this generator because it has some really interesting shadow options that you can select to generate. The generator is an online app that allows you to make various selections between different types of shadows.

Take a look at some of these awesome selections below:

This particular generator is really simple to use and comes with a lot of features that allow you to manipulate the shadows to get the effects you want. Once you’ve made your selections you can chose to generate the CSS code to use on your website.

The generator starts by allowing you to select the style of shadow you want. I have selected the left perspective shadow for this tutorial.  Once you’ve selected the type of shadow you want you can adjust the shadow properties using the sliders provided on the site:

You can also select and change the various properties of the box itself using the box properties offered by the generator:

The resultant box image or shadow changes as you adjust the properties. The images below reflect two different sized boxes:

Once you are happy with your selections, you can choose to generate the code:

This is what the code looks like:

/* This code is tested with latest version of Firefox and Chrome */
.box {
 position: relative;
 width: 260px;
 height: 300px;
 background-color: #fff;
 box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.1) inset;
 border-radius: 1%     1%     1%     1% /     1%     1%     1%     1%;
}
.box:before {
     position: absolute;
     left: 80px;
     bottom: 5px;
     width: 100%;
     height: 37%;
     border-radius: 10% 0 0 0;
     z-index: -1;
     content: "";
     box-shadow: -86px 0 17px rgba(0,0,0,0.33);
     -webkit-transform: skew(36deg);
    -moz-transform: skew(36deg);
    -ms-transform: skew(36deg);
    -o-transform: skew(36deg);
    transform: skew(36deg);
     -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
     }

If you want to learn to understand or adjust the previous code, then sign up for the CSS fundamentals course now. This course will teach you about the fundamentals of CSS and will show you how to control page content like graphics, menus, footers and text formats using CSS. You will learn how to manage style sheets and how to work with multiple style sheets. You will also learn what cascading really means.

The Webestools CSS3 Shadow Generator

The second CSS shadow generator I have chosen for this tutorial is available from Webestools.com. This shadow generator is simpler than the CSS Drop Shadow Generator 0.12 mentioned above, but this generator allows you to create shadows using different colors.

This generator has the following options available for shadow generation:

Although simpler than the first code generator, this generator actually contains all of the elements you generally need for your shadows.

The benefit of using this shadow generator is that the code it produces is fairly simple and therefore quite easy to modify.

The generator also shows you the shadow effect on the website so you can see the shadow change based on the selections you make for your shadow:

The code generated by this webpage to create the above shadow looks like this:

And finally – the generator makes it easy to generate the shadow as an external or internal shadow:

All in all this generator is simple to use and still offers many of the features you’d like to see in a CSS shadow generator.

To learn more about CSS, the Learning CSS course will help you tremendously. It will teach you how to harness the advantages of CSS in your web pages to improve content accessibility, to improve flexibility and control, to reduce complexity and to develop and improve large websites and web applications. The course also includes lessons on how HTML and CSS renders on other devices like smartphones and tablets. The course will teach you what CSS is, the different properties of CSS and how to apply CSS and HTML on various elements on your web pages.

The CSS3Gen CSS3 Box Shadow Generator

Finally, the CSS3 Box Shadow Generator from CSS3Gen.com is another simple easy to use shadow generator.

This generator uses sliders for each of the different variables and is probably the simplest shadow generator to use.

The reason we’ve included this generator is that the webpage actually also explains how CSS is used to create the shadows, so from a learning point of view, this is a particularly helpful generator if you want to learn how to adjust the shadow code or want to learn to write your own shadow generating code.

Add Flair to Your Websites Today

HTML5 and CSS3 have really taken the way web pages are loaded and displayed to the next level so that websites offer an interactive experience for the user. Learn to harness the power of CSS and HTML today. Sign up for the HTML5 & CSS3 Site Design course and learn to build a website that offers a great user experience. This course will teach you to build a website from scratch and includes various tricks and insider secrets on how to make your site more attractive and user friendly. It teaches you how to test before the site goes live and will help you master HTML and CSS coding.