CSS box-shadow Property

February 10, 2021 12:37 pm IST

You are Here:

CSS box-shadow Property

CSS box-shadow property attaches one or more shadows to an element.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 300px; padding: 20px 10px; text-align: center; border: 1px solid #8c8c8c; } #point{ box-shadow: 3px 6px; } #point1{ box-shadow: 3px 6px blue; } #point2{ box-shadow: 3px 6px 15px blue; } #point3{ box-shadow: 3px 6px 15px 5px blue; } #point4{ box-shadow: 3px 6px 15px 5px blue inset; } </style> </head> <body> <h1>CSS box-shadow property</h1> <h2>box-shadow: 10px 20px;</h2> <div id="point"> Box shadow with h-offset and v-offset. </div> <h2>box-shadow: 3px 6px blue;</h2> <div id="point1"> Box shadow with h-offset, v-offset and color. </div> <h2>box-shadow: 3px 6px 15px blue;</h2> <div id="point2"> Box shadow with h-offset, v-offset, blur-radius and color. </div> <h2>box-shadow: 3px 6px 15px 5px blue;</h2> <div id="point3"> Box shadow with h-offset, v-offset, blur-radius, spread-radius and color. </div> <h2>box-shadow: 3px 6px 15px 5px blue inset;</h2> <div id="point4"> Box shadow with h-offset, v-offset, blur-radius, spread-radius, color and inset. </div> </body> </html>

Run

Syntax

Using CSS

element{ //box-shadow: h-offset v-offset blur-radius spread-radius color; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); }

Using Javascript

object.style.boxShadow="0 8px 16px 0 rgba(0,0,0,0.2)";

Animatable

Yes, box-shadow property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS box-shadow property is none.

Property Value

The following table provides a list of values for CSS box-shadow property.

Value	Type	Explanation
none	-	No shadow is displayed.
h-offset	Required	Specifies the horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box.
v-offset	Required	Specifies the vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box.
blur-radius	Optional	Specifies the blur radius. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed.
spread-radius	Optional	Specifies the spread radius. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink.
color	Optional	Specifies the color of the shadow.
inset	Optional	Changes the shadow from an outside the border (outset) to inside the border.

Using JavaScript

In the following example, we will demonstrate how to set the CSS box-shadow property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 300px; padding: 20px 10px; margin-bottom: 10px; text-align: center; border: 1px solid #8c8c8c; } </style> </head> <body> <h1>CSS box-shadow property</h1> <div> My Container </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div")[0]; function myFunction(){ x.style.boxShadow = "0 8px 16px 0 rgba(0,0,0,0.4)"; } </script> </body> </html>

Run