CSS Box Shadow Generator

GigaBook Web Developer Tools

One of the most popular CSS3 features is the CSS Box Shadow, introduced in CSS3 it allows you to easily create shadows for your HTML elements by specifying values for colour, size, blur and offset.

The box-shadow property accepts 2-6 options, the required options are horizontal offset and vertical offset, theoptional options are blur, spread distance, inset and colour.

box-shadow: inset horizontal vertical blur spread colour;

The box shadow property adds a shadow the same size of the current element which will be placed outside of the element.

The inset value will invert the box shadow and place the shadow inside the element. The horizontal and vertical values are used to position the shadow in the correct location away from the element. The blur will change the background colour of the shadow to make it look like it is fading out. The spread will allow you to change the size of the shadow area, by default it's the same size as the element. The colour value will change the entire background colour of the box shadow.

Browser Support

CSS Box Shadow is supported by all major browsers, un-prefixed. When it was first introduced in Chrome v4 and Firefox v3.5 you needed to prefix the box shadow property with the browser specific prefix, -webkit- for Chrome and -moz- with Firefox. Since Chrome v9 and Firefox v3.6 you no longer need to prefix the CSS box shadow property, which means all the browsers will now work using the property box-shadow.

box-shadow: inset horizontal vertical blur spread colour;

CSS Box Shadow Generator

The box shadow property can be quite confusing when you are first starting out, the CSS Box Shadow Generator is designed to make it easy to create any box shadow look you want with a number of options to customise, it will then automatically create the HTML and CSS needed to render the box shadow. While you are changing the options for the shadow there is a live preview area at the top of the screen so you can see exactly what your changes do in real time.

There are 6 tabs on this tool, each will allow you to customise the box shadows.

Templates

The template tab uses 8 effects that you can see on my CSS Box Shadow tutorial over at Paulund. These template range from the simple to the complex, some use multiple box shadows and other even use the pseudo selectors :before and :after to create new elements you can add a new box shadows to create a unique effect.

Use these template as a base to create the shadow you want, to apply the styles for these templates, just click on the effect you want and the tool will automatically populate the options with the styles needed to create the effect and generate the CSS needed for the template.

box-shadow-templates

Box

The box tab will allow you to change the dimensions, background colour, border of the starting box element. Use the sliders to easily change the dimensions and the colour pickers to quickly change the background of the box.

Box Shadow

The box shadow tab will allow you to create your first box shadow, this will be applied to the starting element. Here you will see the 6 options the box shadow property needs and you can pick exactly which ones you want to use.

If you want the shadow to be on the inside of the box check the inset checkbox, change the position with the horizontal and vertical sliders, apply a blur to the shadow area, increase the size of the shadow by changing the spread or change the colour of the box shadow.

The box shadow property allows you add multiple shadows by comma separating the values. If you want to add extra shadows to the main element there is a button to add another shadow to the box-shadow property.

Left Box Shadow & Right Box Shadow

A useful feature in CSS are the pseudo classes for before and after selectors, these will create a new element in your website which you can style just like any other element. This allows us to style these new elements to create a unique effect for our shadows. The reason you would use this instead of adding multiple shadows is because you can skew or rotate the element to create an effect like this.

CSS Box Shadow Effect 5

Using these tabs will allow you to create before and after element, position them exactly where you want and apply the styling options for the box shadow, and even rotate or skew the element to create more unique shadows.

HTML & CSS

The HTML & CSS tab will be updated on every change you make to the styling options. Whenever you move a slider on these options the tool will automatically update the live preview of the shadow and change the CSS. So that at any time when you are happy with your box shadow effect you can come to this tab and copy all the HTML & CSS to use on your own website.

Sign up now for your free trial

Join Coveloping membership from $4.99 a month and get your first month free, cancel at any time


Start Now

Need help with your website? Hire a coveloping freelancer - fill out our quick form with your requirements and we'll get back to you with an estimate and availabilty. Find out more...

Code Copied!