CSS Shadow Effects

1 April 2025 | Category: CSS

CSS shadow effects can add depth and visual interest to your elements by creating a sense of light and shadow. You can apply shadows to elements like text, boxes, and images to make them stand out, look more realistic, and enhance user interaction.

In this tutorial, we will go over how to create different shadow effects using CSS.

🔹 1. What Are CSS Shadows?

CSS shadows allow you to simulate depth by applying a shadow behind elements. There are two types of shadows in CSS:

Box-shadow: Applies shadow to the element’s box.
Text-shadow: Applies shadow to the text.

Both of these properties allow you to control the shadow’s color, position, blur, and spread.

🔹 2. Box Shadow

The box-shadow property allows you to add a shadow to the entire box of an element. This property takes multiple values, such as horizontal offset, vertical offset, blur radius, spread radius, and color.

Syntax of `box-shadow`:

box-shadow: h-offset v-offset blur-radius spread-radius color inset;

h-offset: Horizontal position of the shadow. A positive value moves the shadow to the right, and a negative value moves it to the left.
v-offset: Vertical position of the shadow. A positive value moves the shadow down, and a negative value moves it up.
blur-radius: Defines the blur distance of the shadow. The higher the value, the more blurred the shadow will appear. Set to 0 for a sharp shadow.
spread-radius: Expands or contracts the shadow. Positive values make the shadow bigger, and negative values make it smaller.
color: Defines the color of the shadow. You can use colors like rgba, hex, or rgb to specify the shadow color.
inset: Optional. If used, it will create an inner shadow instead of an outer shadow.

Example 1: Basic Box Shadow

div {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}

This creates a box with a blue background and a shadow 10px to the right and 10px down, with a blur of 15px and a color of rgba(0, 0, 0, 0.3) (a semi-transparent black).

Example 2: Multiple Shadows

You can add multiple shadows to an element by separating them with commas.

div {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2), -5px -5px 15px rgba(255, 255, 255, 0.4);
}

This creates two shadows: one on the bottom-right (5px 5px 10px) and one on the top-left (-5px -5px 15px).

Example 3: Inset Box Shadow

div {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

The inset keyword creates an inner shadow instead of an outer one, giving the element a “pressed” effect.

Example 4: Soft Shadow

div {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

This creates a soft shadow with a subtle blur effect and minimal offset.

🔹 3. Text Shadow

The text-shadow property allows you to apply a shadow effect to text. Similar to box-shadow, it lets you control the horizontal and vertical offsets, the blur radius, and the color of the shadow.

Syntax of `text-shadow`:

text-shadow: h-offset v-offset blur-radius color;

h-offset: Horizontal shadow position.
v-offset: Vertical shadow position.
blur-radius: How much blur to apply.
color: The color of the shadow.

Example 1: Basic Text Shadow

h1 {
  font-size: 48px;
  color: #3498db;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

This creates a shadow on the text with a 2px horizontal and vertical offset, a blur of 4px, and a semi-transparent black color.

Example 2: Multiple Text Shadows

Just like box-shadow, you can add multiple shadows to text by separating them with commas.

h1 {
  font-size: 48px;
  color: #3498db;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), -2px -2px 5px rgba(255, 255, 255, 0.6);
}

This adds two shadows to the text: one offset to the bottom-right and another offset to the top-left with a lighter, semi-transparent shadow.

Example 3: Glowing Text Shadow

h1 {
  font-size: 48px;
  color: #3498db;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 0, 0, 0.2);
}

This creates a glowing effect on the text by adding progressively larger and more transparent shadows.

🔹 4. Practical Use Cases of Shadows

Example 1: Card UI with Shadow

.card {
  width: 300px;
  height: 400px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

A common UI pattern is applying shadows to cards or containers to create depth. The box-shadow here adds a soft, subtle shadow effect around the card.

Example 2: Hover Effect with Box Shadow

button {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

button:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

This button gets a shadow when hovered, making it appear elevated and interactive.

🔹 5. Performance Considerations

Hardware Acceleration: Shadows can trigger hardware acceleration in the browser, improving performance, especially when animating shadows (e.g., with hover effects).
Performance Impact: Too many shadows or high blur values can negatively impact rendering performance, especially on mobile devices. Use shadows judiciously for better performance.

🔹 6. Conclusion

CSS shadow effects are an excellent way to enhance the visual aesthetics of your website. Whether you’re applying them to create depth with box-shadow or giving your text a glowing effect with text-shadow, shadows can make your design more engaging.

Key Takeaways:

Box-shadow is used for creating shadows around elements like boxes, buttons, and cards.
Text-shadow is used to apply shadows to text, which can create glowing or 3D effects.
You can use multiple shadows on the same element for complex visual effects.
Inset shadows allow for inner shadow effects.
Shadows should be used thoughtfully to avoid performance issues, especially on mobile.

Experiment with different values to achieve the shadow effects that best fit your design style!