How Can You Create Multiple Box Shadows on a Single Element in CSS?

Using Multiple CSS3 Box Shadows on a Single Element

In CSS, it's possible to apply multiple box shadows to a single element using CSS3. This offers greater flexibility when creating complex shadow effects, such as combining an inner glow with an outer drop shadow.

Problem:

You want to replicate a Photoshop mockup that has two shadows on a button: an inner lighter box shadow and an outer drop shadow. However, the CSS box-shadow property seems to only allow for one shadow effect per element.

Solution:

To achieve the desired dual shadow effect, you can use the comma-separated syntax to specify multiple shadows. For example:

<code class="css">box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;</code>

In this code:

• The first shadow is an inset box shadow, with a lighter color (#dcffa6) and an offset of 2px.
• The second shadow is a drop shadow, with a darker color (#000) and an offset of 2px for the horizontal and 5px for the vertical.

By separating these shadows with a comma, you can create a button with both an inner glow and an outer drop shadow, as desired.

The above is the detailed content of How Can You Create Multiple Box Shadows on a Single Element in CSS?. For more information, please follow other related articles on the PHP Chinese website!