Shadow Effects in CSS

There are several ways of making shadows with CSS. In this snippet, we will discuss text and box shadows full of details and different types of implementing shadow effects.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Text shadow

To add a shadow to your text, you need to use the CSS text-shadow property. This property is an easy way to work with and create different effects on texts. With the text-shadow property you need four variables to define; the first two are used to set shadow’s position (the horizontal shadow and the vertical shadow), the third value is used to specify the amount of blur and the fourth one defines the color of the shadow.

Syntax

text-shadow: horizontal vertical blur color;

Example of adding a text shadow:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 500px;
        height: 200px;
        margin: 0 auto;
        padding: 10px;
        background: #262626;
        font-size: 100px;
        font-family: Arial, Helvetica, sans-serif;
      }
      p {
        color: #1a1a1a;
        text-shadow: 1px 2px 3px #666666;
      }
    </style>
  </head>
  <body>
    <div>
      <p><strong>W3DOCS</strong></p>
    </div>
  </body>
</html>

Result

W3DOCS

Double shadow

Text shadows give you also a fantastic opportunity to create double shadows. By using a comma, you can separate the declarations, it is possible to provide as many shadows as you want!

Note that there’s a comma after the first two shadows and a semicolon after the last one.

Example of adding a double shadow:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        width: 500px;
        margin: 0 auto;
        padding: 10px;
        background: #fff;
        font-size: 100px;
        font-family: Arial, Helvetica, sans-serif;
      }
      p {
        color: #333333;
        text-shadow: 4px 3px 0px #fff, 9px 8px 0px #ccc;
      }
    </style>
  </head>
  <body>
    <div>
      <p>
        <strong>W3DOCS</strong>
      </p>
    </div>
  </body>
</html>

Border around text

You can also use the text-shadow property to create a border around your text. Here you will need to use multiple shadows and negative pixels to keep the balance.

Example of adding a border around the text:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: #8ebf42;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
      }
    </style>
  </head>
  <body>
    <h1>Border around Text</h1>
  </body>
</html>

Box Shadows

You can have shadow effects for your boxes with the help of the box-shadow property. You can also use box shadows while using Forms.

Learn more about Mailto Forms.

With the box-shadow property you need five variables to define: the horizontal offset (required), a positive value will put the shadow on the right side of the box, and a negative offset will put the shadow on the left side of the box; the vertical offset (required) of the shadow, a negative value means that the box-shadow will be above the box, a positive value means that the shadow will be below the box; the blur radius (required), if this value is set to 0 the shadow will be sharp, a higher number will make more blur; the spread radius (optional), a positive value increases the size, and a negative value decreases the size of the shadow (default is 0, it means that the shadow is the same size as the blur; and the color (required), is used to define the color of the shadow (learn about HTML colors). If the color value is missing, the box-shadow will take the text color.

Example of adding a box-shadow:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      div {
        padding: 10px;
        border: 0.5px solid #1c87c9;
        border-radius: 20px;
        line-height: 4em;
        box-shadow: 0 0 18px 0 #1c87c9;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>Shadow around Border</h1>
    </div>
  </body>
</html>

Moreover, it is possible to change the color of the box-shadow effect when the mouse comes over it. For that purpose, give additional styling to your hover by defining box-shadow for it.

Example of adding a box-shadow with a hovering effect:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      div {
        padding: 10px 20px;
        border-radius: 30px;
        line-height: 4em;
        box-shadow: 0 0 18px 0 #1c87c9;
      }
      div:hover {
        box-shadow: 0 0 18px 0 red;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>Hover over Me!</h1>
    </div>
  </body>
</html>

If you want to go further and have inner box shadows you can do it by just adding the “inset” value for your box-shadow.

Example of adding an inner box-shadow:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #095484;
      }
      div {
        padding: 10px 20px;
        border-radius: 30px;
        line-height: 4em;
        box-shadow: 0 0 20px #095484;
      }
      div:hover {
        box-shadow: inset 0 0 70px #095484;
        cursor: grab;
    </style>
  </head>
  <body>
    <div>
      <h1>Hover over Me to See the Inner Shadow</h1>
    </div>
  </body>
</html>

Now, let’s see a full pack of impressive box-shadow effects which you are free to copy and use:

Remember that it is easy to style your boxes when they are inserted in a <div> element.

Example of adding various shadow effects:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #b7d0e2;
      }
      .box h3 {
        text-align: center;
        position: relative;
        top: 80px;
      }
      .box {
        width: 70%;
        height: 200px;
        background: #d9d9d9;
        margin: 40px auto;
        color: #577491;
      }
      /*==================================================
      * Effect 1
      * ===============================================*/
      .effect1 {
        -webkit-box-shadow: 0 10px 6px -6px #777;
        -moz-box-shadow: 0 10px 6px -6px #777;
        box-shadow: 0 10px 6px -6px #777;
      }
      /*==================================================
      * Effect 2
      * ===============================================*/
      .effect2 {
        position: relative;
      }
      .effect2:before,
      .effect2:after {
        z-index: -1;
        position: absolute;
        content: "";
        bottom: 15px;
        left: 10px;
        width: 50%;
        top: 80%;
        max-width: 300px;
        background: #777;
        -webkit-box-shadow: 0 15px 10px #777;
        -moz-box-shadow: 0 15px 10px #777;
        box-shadow: 0 15px 10px #777;
        -webkit-transform: rotate(-3deg);
        -moz-transform: rotate(-3deg);
        -o-transform: rotate(-3deg);
        -ms-transform: rotate(-3deg);
        transform: rotate(-3deg);
      }
      .effect2:after {
        -webkit-transform: rotate(3deg);
        -moz-transform: rotate(3deg);
        -o-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
        transform: rotate(3deg);
        right: 10px;
        left: auto;
      }
      /*==================================================
      * Effect 3
      * ===============================================*/
      .effect3 {
        position: relative;
      }
      .effect3:before {
        z-index: -1;
        position: absolute;
        content: "";
        bottom: 15px;
        left: 10px;
        width: 50%;
        top: 80%;
        max-width: 300px;
        background: #777;
        -webkit-box-shadow: 0 15px 10px #777;
        -moz-box-shadow: 0 15px 10px #777;
        box-shadow: 0 15px 10px #777;
        -webkit-transform: rotate(-3deg);
        -moz-transform: rotate(-3deg);
        -o-transform: rotate(-3deg);
        -ms-transform: rotate(-3deg);
        transform: rotate(-3deg);
      }
      /*==================================================
      * Effect 4
      * ===============================================*/
      .effect4 {
        position: relative;
      }
      .effect4:after {
        z-index: -1;
        position: absolute;
        content: "";
        bottom: 15px;
        right: 10px;
        left: auto;
        width: 50%;
        top: 80%;
        max-width: 300px;
        background: #777;
        -webkit-box-shadow: 0 15px 10px #777;
        -moz-box-shadow: 0 15px 10px #777;
        box-shadow: 0 15px 10px #777;
        -webkit-transform: rotate(3deg);
        -moz-transform: rotate(3deg);
        -o-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
        transform: rotate(3deg);
      }
      /*==================================================
      * Effect 5
      * ===============================================*/
      .effect5 {
        position: relative;
      }
      .effect5:before,
      .effect5:after {
        z-index: -1;
        position: absolute;
        content: "";
        bottom: 25px;
        left: 10px;
        width: 50%;
        top: 80%;
        max-width: 300px;
        background: #777;
        -webkit-box-shadow: 0 35px 20px #777;
        -moz-box-shadow: 0 35px 20px #777;
        box-shadow: 0 35px 20px #777;
        -webkit-transform: rotate(-8deg);
        -moz-transform: rotate(-8deg);
        -o-transform: rotate(-8deg);
        -ms-transform: rotate(-8deg);
        transform: rotate(-8deg);
      }
      .effect5:after {
        -webkit-transform: rotate(8deg);
        -moz-transform: rotate(8deg);
        -o-transform: rotate(8deg);
        -ms-transform: rotate(8deg);
        transform: rotate(8deg);
        right: 10px;
        left: auto;
      }
      /*==================================================
      * Effect 6
      * ===============================================*/
      .effect6 {
        position: relative;
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      }
      .effect6:before,
      .effect6:after {
        content: "";
        position: absolute;
        z-index: -1;
        -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
        -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
        top: 50%;
        bottom: 0;
        left: 10px;
        right: 10px;
        -moz-border-radius: 100px / 10px;
        border-radius: 100px / 10px;
      }
      .effect6:after {
        right: 10px;
        left: auto;
        -webkit-transform: skew(8deg) rotate(3deg);
        -moz-transform: skew(8deg) rotate(3deg);
        -ms-transform: skew(8deg) rotate(3deg);
        -o-transform: skew(8deg) rotate(3deg);
        transform: skew(8deg) rotate(3deg);
      }
      /*==================================================
      * Effect 7
      * ===============================================*/
      .effect7 {
        position: relative;
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      }
      .effect7:before,
      .effect7:after {
        content: "";
        position: absolute;
        z-index: -1;
        -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
        -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
        top: 0;
        bottom: 0;
        left: 10px;
        right: 10px;
        -moz-border-radius: 100px / 10px;
        border-radius: 100px / 10px;
      }
      .effect7:after {
        right: 10px;
        left: auto;
        -webkit-transform: skew(8deg) rotate(3deg);
        -moz-transform: skew(8deg) rotate(3deg);
        -ms-transform: skew(8deg) rotate(3deg);
        -o-transform: skew(8deg) rotate(3deg);
        transform: skew(8deg) rotate(3deg);
      }
      /*==================================================
      * Effect 8
      * ===============================================*/
      .effect8 {
        position: relative;
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      }
      .effect8:before,
      .effect8:after {
        content: "";
        position: absolute;
        z-index: -1;
        -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
        -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
        top: 10px;
        bottom: 10px;
        left: 0;
        right: 0;
        -moz-border-radius: 100px / 10px;
        border-radius: 100px / 10px;
      }
      .effect8:after {
        right: 10px;
        left: auto;
        -webkit-transform: skew(8deg) rotate(3deg);
        -moz-transform: skew(8deg) rotate(3deg);
        -ms-transform: skew(8deg) rotate(3deg);
        -o-transform: skew(8deg) rotate(3deg);
        transform: skew(8deg) rotate(3deg);
      }
    </style>
  </head>
  <body>
    <div class="box effect1">
      <h3>Effect 1</h3>
    </div>
    <div class="box effect2">
      <h3>Effect 2</h3>
    </div>
    <div class="box effect3">
      <h3>Effect 3</h3>
    </div>
    <div class="box effect4">
      <h3>Effect 4</h3>
    </div>
    <div class="box effect5">
      <h3>Effect 5</h3>
    </div>
    <div class="box effect6">
      <h3>Effect 6</h3>
    </div>
    <div class="box effect7">
      <h3>Effect 7</h3>
    </div>
    <div class="box effect8">
      <h3>Effect 8</h3>
    </div>
  </body>
</html>