CSS Text Shadow

CSS text shadow is a property that allows you to add a shadow effect to text. It enhances the visual appearance of text by creating depth and dimension.

The text-shadow property takes several parameters to define the shadow's color, position, and blur.

Here's an overview of how to use it:

• The horizontal-offset specifies the horizontal distance of the shadow from the text. Negative values move the shadow to the left, and positive values move it to the right.
• The vertical-offset determines the vertical distance of the shadow from the text. Negative values move the shadow up, and positive values move it down.
• The blur-radius sets the blur radius of the shadow. A higher value creates a more blurred shadow, while a lower value produces a sharper shadow. Use 0 for no blur.
• The color parameter defines the color of the shadow. It can be specified using color names, hexadecimal values, RGB values, or any valid CSS color notation.

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

In the above example, the text shadow is positioned 2 pixels to the right, 2 pixels down, has a blur radius of 4 pixels, and has a color of semi-transparent black (rgba(0, 0, 0, 0.5)).

You can also apply multiple shadows to the same text element by separating each shadow definition with a comma:

        
            h1 {
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5),
               -1px -1px 2px rgba(255, 255, 255, 0.8);
}
        
    

In the above example, two text shadows are applied: one with a black shadow and another with a white shadow. The negative values for the second shadow create an offset in the opposite direction, giving a "glow" effect.

By adjusting the values of text-shadow, you can create various text shadow effects to complement your design and make the text stand out on the page.