CSS3 Shadows Tutorial With Examples

In this article, we cover all the concepts of the CSS3 Shadows tutorial with examples and lots of use cases.

CSS3 shadows are a powerful tool in web design that can add depth, dimension, and visual interest to a webpage.

CSS3 Shadows can be used to create a range of effects, from subtle drop shadows to bold, dramatic text effects. In this article, we will explore the basics of CSS shadows and provide plenty of code examples to get you started.

Types of CSS Shadows

There are four types of shadows that can be applied to elements in CSS:

• box-shadow
• text-shadow
• drop-shadow
• inset shadow

Each of these types has its own set of properties and values that can be used to customize the effect.

1. Box-shadow

Box-shadow is used to create a shadow effect around a box element, such as a div or an image. It can be applied to any element with a background, including text boxes, buttons, and images.

Here is an example of a simple box-shadow:

.box {
  box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}

This code creates a box-shadow effect with a 2px offset in the x-direction, a 2px offset in the y-direction, a blur radius of 4px, and a color of rgba(0,0,0,0.4), which is a semi-transparent black color

2. Text-shadow

Text-shadow is used to create a shadow effect around text elements. It can be used to create a variety of effects, from simple drop shadows to more complex text effects.

Here is an example of a simple text-shadow:

h1 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}

3. Drop-shadow

Drop-shadow is used to create a shadow effect that appears to drop below an element, as if it were casting a shadow on the surface below it. It can be applied to any element, including text elements.

Here is an example of a simple drop-shadow:

.box {
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4));
}

4. Inset Shadow

Inset shadow is used to create a shadow effect that appears to be carved into an element. It is applied to the inner edges of an element and can be used to create a variety of effects, from subtle to bold.

Here is an example of a simple inset shadow:

.box {
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
}

Code Examples of CSS Shadow

Below are some examples of how we can use CSS Shadow with different variations.

1. Simple Drop Shadow Example

.box {
  box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}

2. Multiple Shadows

.box {
  box-shadow: 
    2px 2px 4px rgba(

3. Inset Shadow with Border Radius

.box {
  box-shadow: inset 0px 0px 5px rgba(0,0,0,0.3);
  border-radius: 10px;
}

4. Text Shadow with Multiple Colors

h1 {
  text-shadow: 1px 1px 0px #ff0000, 
               2px 2px 0px #ff7f00,
               3px 3px 0px #ffff00,
               4px 4px 0px #00ff00,
               5px 5px 0px #0000ff,
               6px 6px 0px #4b0082,
               7px 7px 0px #9400d3;
}

5. Drop Shadow with Image

.box {
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4));
}
img {
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4));
}

6. Inset Shadow with Box Shadow

.box {
  box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
  background-color: #ffffff;
  padding: 20px;
}
.inner-box {
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
  background-color: #f0f0f0;
  padding: 10px;
}

CSS shadows are a versatile tool that can add depth, dimension, and visual interest to a webpage.

By using different types of CSS shadows, designers can create a range of effects from subtle to bold.

Hopefully, this article has provided you with plenty of code examples to get you started with CSS shadows.

With a little experimentation, you can create your own unique shadow effects and take your web design to the next level.