Box Shadow Generator

To generate CSS box shadow code, select some of the options below and it will be automatically created.

Preview options

What is this tool?

Writing box shadows in CSS can be a little tricky, especially if you are trying to do inset shadows and get the perfect position of the shadow. To help make the process easier you can use this box shadow generator, which shows a live preview of what your box shadows will look like.

Once you have played about with the setting and are happy with how the box show looks, copy the CSS code on the right and paste it on the appropriate selector in your style sheet.