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


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

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

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

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


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