How to Add a Color to the Shadow in CSS

CSS is a powerful tool for web designers and developers to enhance the visual appeal of a website.

One of the most popular and widely used CSS properties is the “box-shadow” property, which is used to add a shadow effect to an element.

In this CSS tutorial we will explore how to add a color to the shadow in CSS.

Introduction

The “box-shadow” property is a shorthand property that is used to add one or more shadows to an element. The syntax for the “box-shadow” property is as follows:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];

The first four values of the “box-shadow” property are optional, but the color value is mandatory.

The color value is used to specify the color of the shadow.

Adding a Color to the Shadow

To add a color to the shadow, you need to specify the color value after the spread radius.

The color value can be specified using a color name, hex code, or RGB value.

Here are some examples of how to add a color to the shadow:

Example 1:

box-shadow: 10px 10px 5px 0px red;

In the above example, we have added a red shadow to the element with a horizontal offset of 10px, a vertical offset of 10px, a blur radius of 5px, and a spread radius of 0px.

Example 2:

box-shadow: 10px 10px 5px 0px #00ff00;

In this example, we have added a green shadow to the element by specifying the hex code for the color green.

Example 3:

box-shadow: 10px 10px 5px 0px rgb(255, 0, 0);

In this example, we have added a red shadow to the element by specifying the RGB values for the color red.

Multiple Shadows

You can also add multiple shadows to an element by specifying multiple values for the “box-shadow” property.

Here is an example of how to add multiple shadows to an element:

box-shadow: 10px 10px 5px 0px red, -10px -10px 5px 0px blue;

In this example, we have added a red shadow and a blue shadow to the element.

The red shadow has a horizontal offset of 10px, a vertical offset of 10px, a blur radius of 5px, and a spread radius of 0px.

The blue shadow has a horizontal offset of -10px, a vertical offset of -10px, a blur radius of 5px, and a spread radius of 0px.

Conclusion

In this post, we have explored how to add a color to the shadow in CSS using the “box-shadow” property.

We have seen that the color value is mandatory for the “box-shadow” property and it can be specified using a color name, hex code, or RGB value.

We also saw how to add multiple shadows to an element by specifying multiple values for the “box-shadow” property.

With this knowledge, you can now add colorful shadows to your web pages and enhance the visual appeal of your website.

FAQs on How to Add a Color to the Shadow in CSS

Also Read:

How Do I Vertically Center Text With CSS
How Can I Horizontally Center an Element in CSS
How to Add a Form to a Full-width Image With CSS
How to Add a Navigation Menu on an Image with CSS
How to Add a Simple Box-shadow to an Element in CSS

Resources and References:

1. CSS Resources – CSS Portal
2. CSS: Cascading Style Sheets – MDN Web Docs
3. CSS Tutorial – W3Schools
4. CSS – Useful Resources – Tutorialspoint