box-shadow
Generate CSS box-shadows, use the "Generate Random" button to try one of the nicely arranged pre-sets
pre sets
hard lightsoft
from above
reduced
inset
glow
box-shadow parameters
-
+
-
+
-
+
-
+
#
CSS3 Box-Shadow Generator
It’s pretty easy to generate a box-shadow in CSS. If you know the x and y coordinates of where you want your shadow, you can just throw in some text-shadow keywords and call it a day. But what if you want more control? What if you want to be able to tweak the blur, offset, and spread values to get the effect you’re going for?
Have you ever wanted to quickly create a box-shadow style but didn't have the time or skill to create one from scratch? CSS3 box-shadow is a powerful new feature that can help you achieve just that. With a few lines of code, you can create complex styles that mimic the look of a drop-shadow or a raised shadow. This article will show you how to use the box-shadow generator to quickly create box-shadow styles.
Related Tools
Generate a bunch of CSS3 box-shadows with Sass! This plugin generates any number of box-shadows using a few Sass mixins and rules. It even includes predefined patterns to get you started. There are no images to load, just pure CSS.
It’s pretty common to need a box shadow in your designs. There are lots of reasons to use them, from simulating a shadow on a photograph to giving text a 3D feel. Box shadows are easy to style with CSS, and in this article we’ll create a quick and easy CSS3 box shadow generator that you can use in your own designs.
Want to add a box-shadow to a div or a section of a page, but don't know where to start? CSS3 has a solution for that. In this article, we'll take a look at how to create a box-shadow with CSS3. We'll see how to create a simple box-shadow and add some style to make it look good.
