CSS Text Shadow

CSS Text Shadow is a property in CSS that adds shadow to text. This property can create different shadow effects like drop shadow, inner shadow, and multiple shadows. This property is widely used in the design of websites to enhance the visual appeal of the text.

Syntax

The syntax for CSS Text Shadow is as follows:

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

• h-shadow: The horizontal position of the shadow. A negative value will place the shadow to the left of the text, and a positive value will place the shadow to the right of the text.

• v-shadow: The vertical position of the shadow. A negative value will place the shadow above the text, and a positive value will place the shadow below the text.

• blur-radius: The blur radius of the shadow.

• color: The color of the shadow.

Drop Shadow

Drop shadow is one of the most common shadow effects used in web design. It creates a shadow that appears to be dropping from the text.

text-shadow: 2px 2px 2px black;

In the above example, the text has a 2px horizontal and vertical shadow with a blur radius of 2px and a black color.

Inner Shadow

Inner shadow is a shadow that appears inside the text. It creates a 3D effect and makes the text look like it is engraved.

text-shadow: 2px 2px 2px black inset;

In the above example, the text has a 2px horizontal and vertical inner shadow with a blur radius of 2px and a black color.

Multiple Shadows

Multiple shadows can be added to the text by separating each shadow with a comma.

text-shadow: 2px 2px 2px black, -2px -2px 2px white;

In the above example, the text has two shadows. One shadow is a 2px horizontal and vertical shadow with a blur radius of 2px and a black color. The other shadow is a -2px horizontal and vertical shadow with a blur radius of 2px and a white color.

Conclusion

CSS Text Shadow allows web designers to create different shadow effects for text. It can be used to create drop shadows, inner shadows, and multiple shadows. By using different combinations of the properties, designers can create unique and visually appealing text effects.