How to Add White Text With Black Shadow in CSS

As a web developer or designer, one of your main goals is to create visually appealing and easy-to-read websites.

One way to achieve this is by playing with text styles and effects.

In this CSS tutorial, we’ll explore how to add white text with a black shadow using CSS.

First, let’s understand the basics of text shadows.

A text shadow is a visual effect added to text that creates a shadow behind the text.

It’s created by specifying the horizontal and vertical offsets of the shadow, as well as the blur radius and color.

To add a black shadow to white text, we’ll use the following CSS code:

p {
    color: white;
    text-shadow: 2px 2px 2px black;
}

In this code, we’ve set the color of the text to white and added a shadow with a horizontal offset of 2px, a vertical offset of 2px, a blur radius of 2px, and a color of black.

The result will be white text with a subtle black shadow.

Another way to achieve the same effect is by using the CSS box-shadow property.

This property allows you to add a shadow to any element, including text.

To add a black shadow to white text, we’ll use the following code:

p {
    color: white;
    box-shadow: 2px 2px 2px black;
}

By using the box-shadow property, we can add a shadow to any element, including text.

You can also add multiple shadows by comma-separating multiple values for the text-shadow or box-shadow property:

p {
    color: white;
    text-shadow: 2px 2px 2px black, -2px -2px 2px black;
}

In this example, we’ve added two shadows to the text.

The first is the same as before, with a horizontal offset of 2px and a vertical offset of 2px.

The second shadow is the same, but with a negative offset of -2px and -2px.

This creates a more dramatic effect and makes the text appear to be raised.

In conclusion, creating visually appealing text on a website can be achieved by playing with text styles and effects.

Adding a shadow to text is a great way to make text stand out and be more readable.

With the help of CSS text-shadow and box-shadow properties, you can add a shadow to any element including text, making it easy to create an eye-catching design.