CSS Shadows
Tags: css, beginners
Published: 2020-01-02 13:22:50

Learn how to add different types of shadows to boxes and text.

## Box-Shadow ##

The `box-shadow` property adds shadow effects around an element. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.

If a `border-radius` is specified on the element with a box shadow, the box shadow takes on the same rounded corners.

The `box-shadow` property can have several values:

- **inset:** changes the shadow to one inside the box — inside the border, above the background, but below content (e. g. `box-shadow: 5px 10px inset;`)
- **offset-x:** (required) specifies the horizontal distance; negative values place the shadow to the left of the element; positive ones put the shadow on the right of the box
- **offset-y:** (required) specifies the vertical distance; negative values place the shadow above the element; positive ones put the shadow below the box
- **blur-radius:** the larger this value, the bigger the blur; negative values are not allowed (e. g. `box-shadow: 10px 10px 8px #888;`). If not specified, it will be set at 0 and the shadow’s edge will be sharp
- **spread-radius:** positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink (e. g. `box-shadow: 10px 10px 8px 10px #888;`). If not specified, it will be 0 and the shadow will be the same size as the element
- **color**
- **none:** default value; no shadow is displayed

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/44cwdjhchmrt2kcn8p3v.png)

You can specify a single box-shadow using 2–4 <length> values, <color> and inset:

 - If only 2 values are given, they are interpreted as <offset-x><offset-y> values
 - If a 3rd value is given, it is interpreted as a <blur-radius>
 - If a 4th value is given, it is interpreted as a <spread-radius>
To specify multiple shadows, provide a comma-separated list of shadows (each one having bigger `length` values than the previous ones), for example:

```css
box-shadow: 5px 5px #888, 10px 10px #7eb4e2, 15px 15px #f69ec4;
```

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0hq4dfgnk699db0sdl11.png)

### One-Sided Shadow ###

You can create a one-sided shadow by setting the `offset-x` value to 0 and applying a negative `spread-radius`.

```css
box-shadow: 0 10px 5px -5px #888;
```

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/6u8hvtdq7pdppqsfnsdc.png)

### One-Sided Full-Width Shadow ###

To create a one-sided shadow with the length equal to the length of the element, set the `offset-x` value to 0 and apply a negative `offset-y`:

```css
box-shadow: 0 -16px 12px 12px #000;
```

It will work only for a navigation bar that is sticking to the top, left, and right of the page. When applied to an element with space all around it, this kind of shadow will look like a three-sided shadow.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ma040m9cse5uvnyvl2pe.png)

### Shadow From Two Opposite Sides ###

To create a shadow that is dropped from two opposite sides, add two comma-separated lists. The second one should contain a negative value for `offset-x`.

```css
box-shadow: 10px 0 10px -10px #666,
            -10px 0 10px -10px #666;
```

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7vxng0jsraoqebuh9ls9.png)

### Irregular Drop-Shadows ###

Here are (slightly modified) examples of how to create irregular drop-shadows from Lea Verou’s book CSS Secrets. In the examples below, shadows are created with the help of the `filter` property, not `box-shadow`.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/q27zgbi0gwizlhdr0qs3.png)

```css
div {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  vertical-align: bottom;
  width: 5.9em;
  height: 5.2em;
  margin: .6em;
  background: #7eb4e2;
  filter: drop-shadow(.1em .1em .1em rgba(0,0,0,.5));
  font: 200%/1.6 'Amatic SC', cursive;
  font-weight: 700;
  text-align: center;
}

.speech {
  border-radius: .3em;

  &::before {
    content: '';
    position: absolute;
    top: 1em;
    right: -.7em;
    width: 0;
    height: 0;
    border: 1em solid transparent;
    border-left-color: #7eb4e2;
    border-right-width: 0;
  }
}

.dotted {
  background: transparent;
  border: .3em dotted #7eb4e2;
}

.cutout {
  border: .5em solid #7eb4e2;
  border-image: 1 url('data:image/svg+xml,\
	                 <svg xmlns="http://www.w3.org/2000/svg"\
		              width="3" height="3" fill="%237eb4e2">\
		     	         <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\
		     	      </svg>');
  background-clip: padding-box;
}
```

## Text-Shadow ##

The `text-shadow` property is useful to add a shadow to the text. Shadows can be single-layered or multi-layered, blurred, colored or transparent. By applying a shadow to an element, you can specify only one length and color value, thus creating a color copy of a single character or word. Also, with the help of the shadow, you can make the text more readable if the contrast between the text color and the background is not sufficient.

Each shadow is applied both to the text itself and to the `text-decoration` property if there is one. You can set several shadows at the same time, separated by commas. Shadows overlap but do not overlap the text itself. The first shadow is always located above the rest of the shadows.

The `text-shadow` property can have up to four values: two or three values defining the length of the shadow and an optional color.

```css
text-shadow: x-offset | y-offset | blur | color
```

 - **x-offset:** specifies the horizontal offset of the shadow; a positive value creates a shadow offset to the right of the text, and a negative length creates a shadow to the left
 - **y-offset:** specifies the vertical offset of the shadow; a positive value shifts the shadow down, a negative value shifts it up
 - **blur:** sets the blur radius; negative values are not allowed; if the blur value is 0, the edge of the shadow is clear; otherwise, the larger the value, the more blurred is the edge of the shadow

For example:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/toijhqoaoow9jhbtt391.png)

```css
color: #fff;
text-shadow: 1px 1px #32557f,
             1px -1px #32557f,
             -1px 1px #32557f,
             -1px -1px #32557f,
             3px 3px 6px rgba(0,0,0,.5);
```

You can find more examples of text shadows in the article [CSS Fonts](https://sharkcoder.com/typography/fonts)  on [sharkcoder.com] (https://sharkcoder.com/visual).