Add a box-shadow below/around an element.

      Box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset]

   v-shadow  The position of the horizontal shadow. (+/-) px, pt or em
   v-shadow  The position of the vertical shadow. (+/-) px, pt or em 
   blur      The blur distance   px, pt or em
   spread    The size of shadow  px, pt or em
   color     The color of the shadow.
   inset     Set an 'inside' shadow

If the spread is zero or a negative number then the box shadow will be smaller than the element making it visible only against one or two edges, depending where it has been positioned horizontally or vertically.

If the spread/blur is larger that the horizontal/vertical offset position, then the box shadow will be visible on all 4 sides.

A box shadow with a negative spread will be smaller than its element. When shifted down a few pixels this will only be visible on the bottom edge. This can be used to create an underline thats a different colour to the text.

If an RGBA colour is used with an opacity < 1 then the background colour will bleed through.


.emw3class { box-shadow: 0.5em 0.5em 3em red; }

.sample { box-shadow: -6pt 6pt 3pt 1pt #f4a460 inset; }
#emw3id { box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3); }

Try it:

This is a sample of text with a CSS border. A drop shadow will only appear for elements that have a border style.

(CSS 3) Browser Support: IE 9 and up, and all other modern browsers.

“The reason most people never reach their goals is that they don't define them, learn about them, or even seriously consider them as believable or achievable. Winners can tell you where they are going, what they plan to do along the way, and who will” ~ Denis Waitley


box-shadow - MDN Web Docs.
border-style - Set the border style.
border-radius - Shorthand to set all four border-*-radius properties.
CSS3 generator for rounded corners and box-shadow.

Copyright © 2013-2020
Some rights reserved