A modern and very clean CSS box shadow generator. At last: cross-browser code for your shadowing needs.
adjust shadow parameters
css code snippet
-webkit-box-shadow:0px 10px 39px 10px rgba(33,33,33,0.22);
-moz-box-shadow: 0px 10px 39px 10px rgba(33,33,33,0.22);
box-shadow: 0px 10px 39px 10px rgba(33,33,33,0.22);
About CSS Box Shadows
Box shadows have a longstanding presence in digital aesthetics. Beginning with the gratuitous overuse in Internet 1.0, later with the representational metaphors of Apple’s skuemorphisms, and more recently the more abstract use in Google’s Material design — and beyond.
Above all, shadows are used for the indication of tactility in interaction design. However, shadowing still enjoys broad popularity across most of the Internet. In fact, the recent trends around expressivism encourage open, frequent shadowing and other visual flamboyances.
Therefor, please enjoy this CSS Box Shadow Generator!
Good uses for CSS Box Shadows
Out of all the visual ornamentation available, drop shadows help lend a sense of real physicality to UI elements. This illusion makes UI elements appear more (or less) touchable, which is useful in communicating interactivity.
We primarily rely on design layout and structure organize content. In addition, we sometimes use depth as a way to communicate visual hierarchy. Drop shadows can help clarify visual hierarchies and ordering by imparting a sense of depth to an image, scene or interface. Specifically, the use of “Z-Space,” as it is called, can bring important items to the foreground, and move less important items to the background.
Like any CSS property, box shadows can be animated. While the possibilities are endless, the transition of depth, in particular, can be useful within interaction design. For example, think of Apple’s menus moving items to the foreground and background as the user swipes through a list. Think of the subtle changes to shadows that occur. There are many possibilities.