CSS Shadow Code Generator
When you want a shadow for your content div, or a photo or other image, use the online generator embedded in this article.
The generator was made because I never could remember all the values the CSS box-shadow property can use and in what order it expects them. Every time I looked up the information I thought, "I gotta make a generator for this."
Last week, I reached the tipping point. All the "I gotta's" stacked up in my attention pushed me to finally get it done.
The CSS code the generator creates is for CSS style sheets and also for inline CSS. The definitions can be used in div, img, td, p, pre, and other HTML tags. If the tag contains content, it is almost certainly able to have borders and/or a shadow.
In addition to shadows, the generator also creates CSS code for a border, including rounded corners. Example on the right:
On the left is the box with a golden shadow reminiscent of a halo.
The CSS Shadow Code Generator makes trying different colors and shadows very, very easy. Type in a value and see the effect immediately. When you're satisfied, copy the CSS code and use it in your own project.
Here are examples of code copied from the CSS Shadow Code Generator being used in img tags:
Using the CSS Shadow Code Generator
The generator has text boxes and dropdown lists to specify values for the border, rounded corners, and the shadow.
Colors: Colors are specified as any value CSS can use. Generally, I use the color name or the hex value. Examples are "blue" or "#0000ff".
Numbers: Numbers refer to distances or thicknesses. Generally, they are positive values, although the horizontal and vertical shadow values may be negative.
All text fields that aren't for colors are for numbers.
Unless specified otherwise, numbers are assumed to be pixel measurements. As examples, "1" will be treated as "1px" and "1em" will be treated as specified, "1em".
There are three sections with fields for changing the border, corners, and shadow styles.
-
Border — The section asks for the width, style, and color of the border. For no border, blank the width field.
-
Corners — The section asks only for the radius of the corners. For no rounded corners, blank the field.
-
Shadow — The section asks for the horizontal and vertical distance from center to make the shadow. A negative horizontal number means left of center, a positive means right of center. Similarly, a vertical number means above center and otherwise below center. The number 0 is valid for those two fields.
The section also asks for the shadow's blur, spread, color, and whether or not the shadow is outside the content or inset.
For no shadow, blank either the horizontal field or the vertical field.
Tip #1: To make a glow, specify value 0 for both the Horizontal and Vertical fields. Specify a value larger than 0 for the Blur and Spread fields. Then adjust the Blur and Spread values until the blur is what you're looking for.
Tip #2: To make a shadow instead of a glow, specify values other than 0 for Horizontal, Vertical, and Blur fields. Specify 0 for the Spread field. Then adjust the Horizontal, Vertical, and Blur values until the shadow is what you're looking for.
Tip #3: Click the "(How?)" link with the examples further above to see how to duplicate the effect in the generator.
The generated CSS code is in a box below the three sections with fields for changing the border, corners, and shadow styles.
The CSS Shadow Code Generator
Below is an area bounded by a dotted gray border. In the middle of the area is a div that will be affected by the values you put into the various fields.
The area bounded by the dotted gray border can be given a different color with the "Ambient color" text field – for those instances when you want to see how the central div looks with different page background colors.
The div in the middle of the area can be given its own background color with the "Background color" text field.
When changing a color, click or tap anywhere outside the field to make the change effective.
This box contains the CSS definitions for the values specified in the above fields. Use them in a style sheet or, for inline CSS, in the style attribute of the applicable div, img, or other HTML element.
Using the Generated Code
When satisfied with the effect created by the values you specify, copy the generated CSS code.
Generally, the CSS code would be used as declarations for selectors in a CSS style sheet. It can also be used as inline CSS by pasting the code directly into the HTML element's style attribute. Example:
<div style="border: 1px solid black; border-radius: 7px; box-shadow: 0px 0px 3em 1em #999;"> [Content here] </div>
Remember the URL to this handy generator. Bookmark it. Put it on your Facebook timeline so you'll have it handy. Mention it in a blog post to always have it on hand.
If you know others who would appreciate the generator, certainly let them know.
Will Bontrager
