DEV Community

Cover image for box-shadow vs drop-shadow() in CSS
keshavs759
keshavs759

Posted on • Updated on • Originally published at vidyasheela.com

box-shadow vs drop-shadow() in CSS



In this article, we will see the difference between the box-shadow and drop-shadow(). The box-shadow is a CSS property but drop-shadow() is a function. Both box-shadow and drop-shadow() are used to cast a shadow. The difference between them is, the box-shadow property creates a rectangular shadow behind an element's entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself.

In simple words, while working with the transparent images if you use the drop-shadow() filter function it will create a shadow on the image's content and if you use the box-shadow property it will create a rectangular shadow behind an element's entire box.

In case of text content, drop-shadow() works similar to the text-shadow property.

Their syntax is,

filter: drop-shadow(offset-x offset-y blur-radius color);
box-shadow: offset-x offset-y blur-radius color ;

Demo Code is,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>box-shadow vs drop-shadow</title>
    <style>
      .img-1 {
        filter: drop-shadow(0 0 5px black);
      }

      .img-2 {
        box-shadow: 0 0 5px black;
      }
    </style>
  </head>

  <body>
    <img
      class="img-1"
      src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
      alt="google.logo"
    />
    <img
      class="img-2"
      src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
      alt="google.logo"
    />
  </body>
</html>

Also Read:

Discussion (2)

Collapse
jarvisscript profile image
Chris Jarvis

To see the highlighting you need to add the language after the back ticks. Putting before the code shows the language before the code block without adding the highlighting.

<img
      class="img-1"
      src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
      alt="google.logo"
    />
    <img
      class="img-2"
      src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
      alt="google.logo"
    />

Enter fullscreen mode Exit fullscreen mode

You can see more here

Collapse
abhirajb profile image
Abhiraj Bhowmick

Just a suggestion,
you can add the name of the language in this case "html" before the back-ticks(`) of code blocks, so that there is syntax highlighting.