How to use shadows in your CSS -

This article will cover CSS shadows (box-shadow) and their use in stylesheets.

Shadows are used to increase the illusion of depth outside or inside our elements, by giving them depth cues. We can set shadows using the box-shadow property, which creates a shadow of an element’s frame. The box-shadow property is quite powerful as it can manipulate the shadow offsets, set blur and spread radius values, and additionally, it allows us to even write multiple shadow properties for more complex elements. We will go through some practical examples in the article itself. Buckle up and let us begin!

The Box Shadow

Take a look at the following two code samples.

<div class="shadow-wrapper">
  <div class="shadow shadow-1">
    <button>Shadow 1</button>
  </div>
</div>

.shadow-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 600px;
  margin: 0 auto;
  margin-top: 50px;
}

button {
  width: 150px;
  height: 50px;
  background-image: linear-gradient(90deg, rgb(114, 7, 74), rgb(232, 54, 104));
  border: none;
  color: white;
  font-size: 20px;
  font-weight: bold;
  border-radius: 10px;
}

.shadow {
  border-radius: 10px;
  margin: 4em 2em;
}

.shadow-1 {
  box-shadow: 10px 10px black;
}

.shadow-2 {
  box-shadow: 10px 10px 10px 10px black;
}

Above we set the “Shadow 1” element to have the following box-shadow property: box-shadow: 10px 10px black; and it produces a shadow like in the following image (left):

CSS Shadow - Examples 1 and 2 — CSS Shadow – Examples 1 and 2

The pixel values are the offsets of the shadow from the element’s original position. First, we write the horizontal distance, and then the vertical distance. By setting the offsets to 10 pixels we moved the shadow right and bottom from the element. Otherwise, setting negative values would move the shadow in opposite directions.

The value of black specifies the color of the shadow. The shadow of the element has the same proportions and structure (rounded borders, for example) as the element itself. There are two supplementary values that can be added to the box-shadow property – the blur radius and the spread radius. If we would add those two values the order of the variables would go from the horizontal offset to the vertical offset, then to the blur radius, and lastly to the spread radius.

The blur radius is the third box-shadow value and it controls the blur of the shadow. The larger the value – the bigger the blur. If the value is not specified it will be set as 0 (having sharp edges). In the example above (Shadow 2) we gave our shadow a softer edge, using the blur shadow property.

The spread radius controls the size of the spread. Positive values would make the shadow larger in all directions, negative values would make the shadow shrink. There is also another optional value mentioned in the next example.

Creating buttons using shadows

Shadows are often used to create interactive buttons. The buttons can be responsive on click & hover by changing the shadow properties a bit.

Take a look at the following code sample:

.shadow-3 {
  box-shadow: 5px 5px 10px #531b0f;
}

.shadow-3 button {
  background-image: linear-gradient(
    to bottom,
    rgb(114, 7, 74),
    rgb(144, 12, 63)
  );
}

.shadow-3 button:active {
  box-shadow: inset 0 0 10px #531b0f, inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

So what is going on here?

We created a really subtle gradient in order to give the button a threedimensional appearance. Moreover, the base button has a shadow with a slight offset and some additional blurriness. When we actually click the button we want to give the user some visual cues that the button is active.

We do this using the inset property of box-shadow that makes the shadow appear inside of the border, rather than the outside. We also created multiple shadow definitions, separating them with a comma. Using multiple definitions we can add as many shadows to the element as we want.

The first shadow definition has offsets of zero with a slight shade along the edges of the element, and the other creates the ‘reflective’ appearance of the button, by giving it a transparent black bacgkround.

The button above is an example of a skeuomorphic design. The skeuomorphic design makes onscreen elements resemble real-world objects, with similar physical characteristics, realistic highlighting, and shadows.

Using shadows to create flat elements

Flat design is simpler in nature, uses bright and uniform colors and two-dimensional elements. Flat design is especially used in responsive websites – where the simplicity of flat elements makes pages load fast and smooth.

To create a flat element we need to control and reduce our use of gradients, shadows, borders and rounded corners, or to use those elements subtly.

Let us create a flat button:

.shadow-4 button {
  border-radius: 2px;
  background: rgb(114, 7, 74);
  box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.19);
}

.shadow-4 button:hover {
  background: rgb(130, 15, 80);
}

Notice the barely visible hover style?

We removed the gradient from the background, settling instead for a simple one-color background. And we created a subtle shadow – without any offsets and having only a slight blur and radius values, using a black transparent color.

Modern 3-D buttons

We can also combine the two design concepts of skeuomorphism and flat design, by creating a button that has a minimal design but a thick border and a threedimensional look. We will use box-shadow to create an illusion of a curved edge. When the button is clicked the box-shadow is reduced by a few pixels, white the element is shifted by a few pixels, to give the button the illusion of being pressed.

.shadow-5 button {
  border-radius: 2px;
  background: rgb(114, 7, 74);
  box-shadow: 0 10px rgba(84, 25, 65);
}

.shadow-5 button:active {
  background: rgb(130, 15, 80);
  box-shadow: 0 4px rgba(84, 25, 65);
  transform: translateY(6px);
}

We created a crisp shadow in order to give the button a bottom border. When the button is clicked we will change the color of the background a bit, and the box-shadow property. With transform: translateY(6px) we moved the element just so slightly to the bottom in order to make up the missing box shadow and to give the button the ‘feeling’ of being clicked.

Final Words

We used shadows to create some common design types. Shadows can help us create rich visual elements and physical realism. For a more detailed explanation check the official documentation.

Here is our our codepen for this article:

See the Pen ZEeLrLp by Mehmed (@brachika) on CodePen.

Please check other blog posts on thedukh.com. For more CSS articles click on one of the links below:

Facebook Tweet Pin LinkedIn