CSS Shadow Effect

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

The text-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

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title>text-shadow property</title>
<!--Driver Code Ends-->

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

<!--Driver Code Starts-->
</head>

<body>
    <h1>
        Geeks For Geeks | A computer Science 
        portal for Geeks
    </h1>
</body>
</html>

<!--Driver Code Ends-->

Adds shadow to text: text-shadow creates a shadow behind the text for a 3D effect.
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

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title>box shadow property</title>
<!--Driver Code Ends-->

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

<!--Driver Code Starts-->
    <script>

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

<body>
    <button onclick="Shadow()">Click to see Shadow</button>
    <div id="Gfg">
        <h1>GeeksforGeeks</h1>
    </div>
</body>
</html>

<!--Driver Code Ends-->

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.

Text Shadow

Box Shadow

Explore