coding help
Quick Code


Copy to clipboard
<div style="box-shadow: 0 0 10px;">Text Goes Here</div>

Introduction

The CSS, HTML, and WikiText Box Shadow property can be used to give block elements a 'drop' or inner shadow. It can be confused with text shadow, a similar attribute.

Box Shadow Code

To get a box shadow, use the below code: 

<div style="box-shadow: _px _px _px COLOR">

Replace the _s with a number. The first two numbers are the x and y axis offset respectively. The last number is the blur-radius.
Then, replace COLOR with a hex code, RGB/RGBA, or common color name from our colors page.

Examples

Below are 4 different examples of applying the box-shadow property on a div style tag. 

<div style="border: 1px solid black; margin: 20px; padding: 15px; box-shadow: 0 0 10px black;">Text Here</div>


Result:

Text Here


Offset drop shadow

<div style="border: 1px solid green; margin: 20px; padding: 15px; box-shadow: 5px 5px 10px green;">Text Here</div>


Result:

Text Here

Inner Shadow

<div style="border: 1px solid blue; margin: 20px; padding: 15px; box-shadow: inset 0 0 10px blue;">Text Here</div>


Result:

Text Here


Two Color Shadow

<div style="border: 1px solid red; margin: 20px; padding: 15px; box-shadow: 0 0 8px red, 0 0 20px blue;">Text Here</div>


Result:

Text Here

Two Border Color

Adding two Borders with different Colors for the Box Shadow.

Examples

<div style="border: 1px solid blue; box-shadow: 0 0 10px blue; padding:15px;"><div style="border: 1px solid blueviolet; box-shadow: 0 0 10px blueviolet; padding:15px;">Text Go Here</div></div>


Result:

Text Go Here


Offset drop shadow

<div style="border: 1px solid hotpink; box-shadow: 5px 5px 10px hotpink; padding:15px;"><div style="border: 1px solid violet; box-shadow: 5px 5px 10px violet; padding:15px;">Text Go Here</div></div>


Result:

Text Go Here


Inner Shadow

<div style="border: 1px solid red; box-shadow: inset 0 0 10px red; padding: 15px;"><div style="border: 1px solid deeppink; box-shadow: inset 0 0 10px deeppink; padding:15px;">Text Go Here</div></div>


Result:

Text Go Here


Values

The box-shadow property has six possible values:

Only three property values are required—the horizontal offset, vertical offset, and the color.