CSS Shadow Effect (original) (raw)

Last Updated : 11 May, 2026

CSS shadow effects enhance the appearance of elements by adding depth and a 3D-like look. They make text and boxes stand out, improving visual appeal.

• Can be applied using text-shadow for text and box-shadow for elements.
• Help create focus, contrast, and a sense of layering in design.

**Text Shadow

Thetext-shadow property in CSS is used to display text with a shadow. This property defines the offset, blur radius, and color of the shadow.

**Syntax:

**text-shadow: offsetX offsetY blurRadius color;

HTML `

<style>
    h1 {
        color: green;
        text-shadow: 3px 3px 3px lightgreen;
    }
</style>

Geeks For Geeks | A computer Science portal for Geeks

`

1. **Adds shadow to text: text-shadow creates a shadow behind the text for a 3D effect.
2. **Customizable: You can change shadow’s position, blur, and color.

Box Shadow

The box-shadow property in CSS applies a shadow effect to elements such as text boxes, divs, and images. This property defines the horizontal and vertical offsets, blur radius, spread radius, and color of the shadow.

**Syntax:

box-shadow: offsetX offsetY blurRadius spreadRadius color;

HTML `

<style>
    #Gfg {
        width: 220px;
        height: 50px;
        background-color: green;
        color: white;
    }
</style>

<script>

    // function that show Shadow Effect.
    function Shadow() {
        document.getElementById("Gfg").style.boxShadow = "5px 5px 5px gray";
    }
</script>

`

• **Adds shadow around element: box-shadow creates a shadow outside the box, giving a 3D effect.
• **Interactive effect: Using JavaScript, you can apply the shadow dynamically when an action (like a button click) happens.

**Note: CSS shadow effects are used for enhancing the visual design of your web elements. The text-shadow and box-shadow properties allow you to add depth and emphasis to text and boxes, making your webpage more dynamic and visually appealing.