How to make a shadow in CSS

CSS shadowing: learn how to create & customize shadows with examples & code snippets.

Creating a Shadow in CSS

CSS offers a wide range of options to create shadows. You can use the box-shadow property, which allows you to add multiple shadows to an element. The syntax is as follows:

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

Let's break it down:

• h-shadow specifies the position of the horizontal shadow.
• v-shadow specifies the position of the vertical shadow.
• blur specifies the blur radius.
• spread specifies the size of the shadow.
• color specifies the color of the shadow.
• inset specifies whether the shadow should be inside the element or outside the element.

Here is an example of how to use the box-shadow property to create a simple drop shadow:

box-shadow: 2px 2px 2px #999;

This will create a 2px horizontal and vertical shadow with a blur radius of 2px and a shadow color of #999. You can also use the text-shadow property to add a shadow to text. The syntax for this is similar to the box-shadow property:

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

For example, you can use this property to add a simple drop shadow to text:

text-shadow: 2px 2px 2px #999;

You can also combine multiple shadow effects together to create more complex shadows. Here is an example of how to combine multiple box-shadows together:

box-shadow: 2px 2px 2px #999, 4px 4px 4px #ccc;

This will create a 2px horizontal and vertical shadow with a blur radius of 2px and a shadow color of #999. It will also create a 4px horizontal and vertical shadow with a blur radius of 4px and a shadow color of #ccc.

Additionally, you can use the filter property to create more complex shadows. The syntax for this is as follows:

filter: drop-shadow(h-shadow v-shadow blur spread color)

Here is an example of how to use the filter property to create a drop shadow:

filter: drop-shadow(2px 2px 2px #999);

This will create a 2px horizontal and vertical shadow with a blur radius of 2px and a shadow color of #999. You can combine the box-shadow, text-shadow, and filter properties to create even more complex shadows.

As you can see, CSS offers a wide range of options for creating shadows. You can use the box-shadow, text-shadow, and filter properties to create a variety of effects with just a few lines of code.