CSS text shadow

Created By: chatGPT

CSS text-shadow property allows you to add shadow effects to text. It enhances visual presentation and can create depth. This property takes a few parameters that define the position, blur, and color of the shadow.

h1 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

The syntax for text-shadow is as follows: text-shadow: offsetX offsetY blurRadius color;. Here,

offsetX and offsetY define the horizontal and vertical shadow displacement,
blurRadius specifies the blur level,
color sets the color of the shadow.

p {
    text-shadow: 3px 3px 8px #000;
}

You can even apply multiple shadows to a single text by separating them with commas. This can create complex shadow effects that can enhance typography.

h2 {
    text-shadow: 1px 1px 2px red,
                 2px 2px 4px blue;
}

Here's a practical example demonstrating how to use text-shadow effectively:

html <!DOCTYPE html>

Hello, World!

In this example, the text 'Hello, World!' is styled with a shadow effect that enhances its visibility against the background. Experimenting with different values of the parameters can lead to unique styles!