A modern and very clean CSS box shadow generator. At last: cross-browser code for your shadowing needs.
adjust shadow parameters
horizontal offset
vertical offset
blur
range
opacity
3e4242
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
The box-shadow property is the very cool, very legal CSS property that allows the creation of shadows. In contrast, text elements use their own property, text-shadow, that works a bit differently.
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
- Tactility.
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. - Depth
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. - Animation
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.
