.boring-shadow {
     box-shadow: 0 5px 3px rgba(0,0,0, .45);
}

A common concept of design principals is adding structure, personality, and depth to make your user’s experience more pleasing. Eyes will inevitably gravitate towards your calls to action, which is the end-goal of a website; getting your users to take the path of least resistance. The CSS box-shadow property is an effective way to make your calls to action stand out more by adding the appearance of light focused on the call to action.

As a fledgling web designer, you may already know or have heard of the CSS box-shadow property. This property is pretty versatile, being able to be used on just about any type of HTML object.

The goal:

.diffuse-shadow {
     box-shadow: 0 1px 1px rgba(0,0,0, .5), 
                 0 2px 2px rgba(0,0,0, .15), 
                 0 4px 4px rgba(0,0,0, .25), 
                 0 8px 8px rgba(0,0,0, .3);
}

 

What you’ll need:

  • FTP, SFTP, or SSH access to your server
  • A beginner’s understanding of CSS
  • A call-to-action

Time:

10 minutes.

First Step:

download your stylesheet with connection via FTP (File Transfer Protocol), SFTP (Secure File Transfer Protocol), or SSH (Secure Shell Protocol). I recommend SSH as it is a way to avoid passwords and is the safest way to go about interacting with the host server.

Second Step:

figure out and select the class of the call-to-action (or other object like a bounding box or an image) that you want to apply diffusion to. Use the inspector to test your code.

To open the inspector on Windows, right-click and select “inspect element” or hit f12. You may have to first enable the inspector in the browser in “developer tools” in the hamburger menu.
Inspect element

Third Step:

Save your stylesheet down to your server. (Remember to flush your cache in both your browser and/or server or CDN if you have any enabled)

Did you know that you can layer and nest the shadow over one another? Whether you are a novice or a more experienced webmaster, you can learn this in no time!

Try it!

.shadow-with-edge {
     box-shadow: 0 1px 1px rgba(0,0,0, .05), 
                 0 3px 4px rgba(0,0,0, .15), 
                 0 4px 8px rgba(0,0,0, .25), 
                 0 8px 10px rgba(0,0,0, .3);
}

.exaggerated-shadow {
     box-shadow: 0 1px 1px rgba(0,0,0, .05),
                 0 3px 4px rgba(0,0,0, .15),
                 0 4px 8px rgba(0,0,0, .25),
                 0 8px 10px rgba(0,0,0, .3);
}

As a refresher, the input values of the box-shadow property accepts four values as follows:

  • The first value affects the x-axis (horizontal), accepts an integer (which can be a decimal) and it can also accept px, em, rem, and %
  • The second value affects the y-axis (vertical), accepts an integer (which can be a decimal) and it can also accept px, em, rem, and %
  • The third value affects the blur or the spread, accepts an integer (which can be a decimal) and it can also accept px, em, rem, and %
  • The last value affects the color of the shadow which can be a hex code, an rgb code, or rgba (alpha or transparency)
Less Intense Shadow Is More

.soft-and-dreamy {
     box-shadow: 0 2px 2px rgba(0,0,0, .09), 
                 0 3px 4px rgba(0,0,0, .09), 
                 0 5px 8px rgba(0,0,0, .09), 
                 0 8px 12px rgba(0,0,0, .09),
                 0 12px 18px rgba(0,0,0, .09);
}

.short-and-tight {
     box-shadow: 0 1px 1px rgba(0,0,0, .11),
                 0 2px 2px rgba(0,0,0, .11),
                 0 3px 3px rgba(0,0,0, .11),
                 0 5px 7px rgba(0,0,0, .11),
                 0 7px 10px rgba(0,0,0, .11);
}