Add a box-shadow below/around an element.
Syntax
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.
A 1px box vertical shadow and a spread of 0, along with a suitable color will give text boxes a 3D sunken appearance.
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.
Examples:
.emw3class { box-shadow: 0.5em 0.5em 3em red; }
.sample { box-shadow: -6pt 6pt 3pt 1pt #f4a460 inset; }
#emw3id { box-shadow: 0 0 70px 40px #900; }
Try it:
This is a sample of text with a CSS border. A shadow effect will only appear for those elements that have a border. |
(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
Related:
box-shadow - MDN Web Docs.
border-style - Set the border style.
border-radius - Shorthand to set all four border-*-radius properties.