Shadow

Box Shadow

You can add a shadow to any element using the box-shadow property. There are five values for box-shadow: right, down, blur, spread, and color, separated by spaces. The first two control the displacement of the shadow relative to the original element. Spread controls the size of the shadow - a zero value for spread would make the shadow the same size as the original element, positive values make it bigger and negative values make it smaller. Here is an example of a shadow for a div:

div {
    background-color: blue;
    width: 100px;
    height: 100px;

    box-shadow: 20px 10px 5px 0px purple;
}

Text Shadow

We can also add a shadow in the shape of the text instead of the shape of the box around it. It's controlled with the same inputs as box-shadow, excluding spread. Try this example of text-shadow:

h1 {
    text-shadow: 5px 5px 2px teal;
}