20. Shadows

box-shadow

A style to include outer or inner shadows.

Remove.

.elemento {
  box-shadow: none;
}

Outer shadow: x position, y position, color.

.elemento {
  box-shadow: 2rem 1rem orange;
}

Outer shadow: x position, y position, blur, color.

.elemento {
  box-shadow: 2rem 1rem 1rem orange;
}

Outer shadow: x position, y position, blur, size, color.

.elemento {
  box-shadow: 2rem 1rem 1rem 3rem orange;
}

Inner shadow: x position, y position, color.

.elemento {
  box-shadow: inset 1rem 1rem orange;
}

Multiple shadows.

.elemento {
   box-shadow: 1rem 1rem 1rem orange, -1rem -1rem 1rem black;
}

Shadows using light theory.

.elemento {
  box-shadow:
      0 2.8px 2.2px rgba(0, 0, 0, 0.034),
      0 6.7px 5.3px rgba(0, 0, 0, 0.048),
      0 12.5px 10px rgba(0, 0, 0, 0.06),
      0 22.3px 17.9px rgba(0, 0, 0, 0.072),
      0 41.8px 33.4px rgba(0, 0, 0, 0.086),
      0 100px 80px rgba(0, 0, 0, 0.12)
    ;
  height: 10rem;
  width: 10rem;
  background: white;
  border-radius: 5px;
}

You can read a complete article about it at css-tricks.

text-shadow

Adds a shadow to text.

x position, y position, blur, color.

.elemento {
  text-shadow: 1px 1px 2px black;
}

More information

filter: drop-shadow()

Shadow for irregular elements.

x position, y position, blur, color.

.elemento {
  filter: drop-shadow(-1rem -1rem 0.5rem orange);
}

More information