CSS Box Shadow Generator

A modern and very clean CSS box shadow generator. At last: cross-browser code for your shadowing needs.

adjust shadow parameters

css horizontal offset

horizontal offset

0
css vertical offset

vertical offset

10
css blur radius

blur

39
css spread

range

10
css transparency

opacity

22

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);
Copy Code

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.