How to Create a One-Sided Drop Shadow with CSS?

Creating a One-Sided Drop Shadow

To create a drop shadow that only appears on one side of an element, you can utilize CSS properties and pseudo-elements. Here's a detailed solution:

Using the ::after Pseudo-Element

.box {
  position: relative;
  width: 200px;
  height: 100px;
}

.box::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0px 10px 10px #000000;
  z-index: -1;
}

In this code, we create a parent element with a class of box that positions the element. Then, we style the ::after pseudo-element to create the drop shadow by specifying the position, size, and box-shadow properties. The z-index is set to -1 to place the shadow behind the main element.

Adding a Gradient Blur

To enhance the shadow's appearance, you can apply a gradient blur to the box-shadow:

.box::after {
  ...
  box-shadow: 0px 10px 10px 10px rgba(0, 0, 0, 0.5);
}

This additional code adds a gradient blur to the shadow, creating a more subtle and realistic effect.

The above is the detailed content of How to Create a One-Sided Drop Shadow with CSS?. For more information, please follow other related articles on the PHP Chinese website!