CSS Box Shadow
Tags: css, html, beginners, webdev
Published: 2020-06-06 07:33:51

<!-- wp:paragraph -->
<p>The CSS box-shadow property can be used to give block elements a drop shadow or an inner shadow. Let’s take a close look at this CSS property.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Examples</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>There will be few examples where we discuss on box shadow property.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>1. Adding box shadow to a div.</strong></p>
<!-- /wp:paragraph -->
```html
<div class='one'>One</div>
```
```css
// CSS
.one {
	/* offset-x | offset-y */
  box-shadow: 5px 5px;
}
```

<!-- wp:image {"id":632,"width":252,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large is-resized"><img src="http://blog.suprabha.me/wp-content/uploads/2020/06/one.png" alt="" class="wp-image-632" width="252"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In the above snippet, You have not given any drop shadow color, then by default it will be black color.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>2. Adding colour to drop-shadow:</strong></p>
<!-- /wp:paragraph -->

```html
<div class='two'>Two</div>
```
```css
// CSS
.two {
	/* offset-x | offset-y | color */
  box-shadow: 5px 5px red;
}
```

<!-- wp:image {"id":635,"width":254,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large is-resized"><img src="http://blog.suprabha.me/wp-content/uploads/2020/06/two.png" alt="" class="wp-image-635" width="254"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>3. Adding blur-radius to the drop-shadow:</strong></p>
<!-- /wp:paragraph -->

```html
<div class='three'>Three</div>
```
```css
// CSS
.three {
	/* offset-x | offset-y | blur-radius | color */
 box-shadow: 5px 5px 20px red;
}
```

<!-- wp:image {"id":636,"width":258,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large is-resized"><img src="http://blog.suprabha.me/wp-content/uploads/2020/06/three.png" alt="" class="wp-image-636" width="258"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>4. Adding spread-radius to the drop shadow:</strong></p>
<!-- /wp:paragraph -->

```html
<div class='four'>Four</div>
```
```css
// CSS
.four {
/* offset-x | offset-y | blur-radius | spread-raidus | color */
box-shadow: 0 0 10px 5px #ff000066;
}
```

<!-- wp:image {"id":637,"width":250,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large is-resized"><img src="http://blog.suprabha.me/wp-content/uploads/2020/06/four.png" alt="" class="wp-image-637" width="250"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>5. Adding inset to the div for drop shadow:</strong></p>
<!-- /wp:paragraph -->

```html
<div class='five'>Five</div>
```
```css
// CSS
.five {
/* inset || offset-x | offset-y | blur-radius | spread-raidus | color */
  box-shadow: inset 0px 0px 13px 4px pink;
}
```

<!-- wp:image {"id":638,"width":250,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large is-resized"><img src="http://blog.suprabha.me/wp-content/uploads/2020/06/five.png" alt="" class="wp-image-638" width="250"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you don’t explicitly state a color value for your box shadow — the shadow’s color will be equal to the color value of the HTML element the box-shadow property is being applied to. For instance, if you have a div that has the color of red, the box shadow’s color will also be red:</p>
<!-- /wp:paragraph -->

```html
<div class='six'>Six</div>
```
```css
// CSS
.six {
  color: blue;
  box-shadow: 0px 0px 3px 2px;
}
```

<!-- wp:image {"id":639,"width":254,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large is-resized"><img src="http://blog.suprabha.me/wp-content/uploads/2020/06/six.png" alt="" class="wp-image-639" width="254"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you want a different shadow color, then you’ll need to specify it in the box-shadow property value declaration. Below you can see that even though the foreground color of the div is still red, the box shadow color is blue.</p>
<!-- /wp:paragraph -->

```html
<div class='seven'>Seven</div>
```
```css
// CSS
.seven {
  color: red;
  box-shadow: 0px 0px 3px 2px blue;
}
```

<!-- wp:image {"id":640,"width":246,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large is-resized"><img src="http://blog.suprabha.me/wp-content/uploads/2020/06/seven.png" alt="" class="wp-image-640" width="246"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>Multiple Box Shadows</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is where you can get really creative with this CSS property: You can apply more than one box shadow on an element.</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>box-shadow: [box shadow properties 1], [box shadow properties 2], [box shadow properties n];</p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>In other words, you can have multiple box shadows by separating each property value group with commas (,).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In the below example, there are two box shadows.</p>
<!-- /wp:paragraph -->

```html
<div class='eight'>Eight</div>
```
```css
// CSS
.eight {
   box-shadow: 5px -7px 2px 2px blue, -5px 5px 5px 5px pink;
}
```

<!-- wp:image {"id":641,"width":254,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large is-resized"><img src="http://blog.suprabha.me/wp-content/uploads/2020/06/eight.png" alt="" class="wp-image-641" width="254"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I hope you find the article helpful.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's try to solve below problem 😜</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4><strong>❓❓Create a circle inside circle using single div. ❓❓</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><span style="text-decoration: underline;">Output</span>:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":631,"width":250,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large is-resized"><img src="http://blog.suprabha.me/wp-content/uploads/2020/06/Screenshot-2020-06-01-at-4.11.24-PM.png" alt="" class="wp-image-631" width="250"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>You can find the <a href="https://codepen.io/suprabhasupi/details/WNreGya" target="_blank" rel="noreferrer noopener">solution here</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You can find all above examples <a href="https://codepen.io/suprabhasupi/pen/KKVPMgW" target="_blank" rel="noreferrer noopener">here</a>, added few more examples 😜</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Thanks for reading this article ♥️</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;If you have any question please reach out to me on&nbsp;<strong><a href="https://twitter.com/suprabhasupi">@suprabhasupi</a> 😋</strong></p>
<!-- /wp:paragraph -->

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> Suprabha.me</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>