How Can I Create a One-Sided Drop Shadow in CSS?

Creating a One-Sided Drop Shadow

Achieving a drop shadow that affects only one side of an element can be a common requirement in web design. For example, you may encounter a scenario where you want a shadow to fall beneath an element without overlapping adjacent elements.

One method to achieve this effect is through the box-shadow property, which allows you to specify the size, spread, and color of a shadow around an element. However, the default behavior of box-shadow is to create a shadow on all sides of the element.

Creating a Bottom-Only Drop Shadow

To create a drop shadow that only displays beneath an element, you can create a pseudo element and position it at the bottom of the parent element. This pseudo element will then receive the shadow effect.

Here's an updated example from the original question using modern CSS syntax:

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    position: absolute;
    top: calc(10% - 10px);
    left: calc(50% - 80px);
}

.box-shadow:after {
    content: "";
    position: absolute;
    width: 100%;
    bottom: 1px;
    z-index: -1;
    transform: scale(.9);
    box-shadow: 0px 0px 8px 2px #000000;
}

This code will create a drop shadow that only extends downward from the bottom of the #box element, effectively giving the impression of a bottom-only shadow. The pseudo element is positioned at the bottom with a z-index of -1 to ensure it appears behind the main element.

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