Stopbyte

Add Shadow Effect to <div/> in HTML Using CSS

Web Development CSS
#1

Hi,

is it possible to add shadow to a <div> element in HTML using CSS and if possible can you please provide some little practical example of that.

thanks a lot.

1 Like
#2

that would be an easy task, you can add shadow around a

this way: 
<html>
    <head>
        <style> 
            .my-div-drop-shadow-style {
                background-color: green;
                box-shadow: 10px 10px 5px gray;
            }
        </style>
    </head>
    <body>
        <div class="my-div-drop-shadow-style">
            <p>Hello World: Shadowed Div...</p>
        </div>
    </body>
</html>

That should be enough to get you on the right track.

2 Likes
#3

You can play around with the CSS style property “box-shadow” this is the full syntax for that property:

box-shadow: none|horizontal-shadow vertical-shadow blur spread color |inset|initial|inherit;

you can refer to this documentation for full description of all parameters:

1 Like