CSS provides developers with a wide range of properties and pseudoclasses to add the desired styling to elements. One notable property is the box shadow property, which can add a shadow-like effect around an element.

The box-shadow property allows you to add multiple shadows around the box by specifying color, size, blur, offset, and inset values.

The shadow offset is determined by these two values. The horizontal distance is specified by H-offset. Positive values give a shadow to the element’s right. Negative values move the shadow to the element’s left side. The vertical distance is specified by V-offset. A positive value casts a shadow just below the element. When the value is negative, the shadow is placed above the element. The shadow will be behind the element if both values are 0.

The blur radius, if set to 0, the shadow will be sharp, the higher the number, the more blurred it will be, and the further out the shadow will extend. A shadow with a 5px horizontal offset and a 5px blur radius, for example, will have a total shadow of 10px.

The spread radius , positive values increase shadow size, and negative values decrease shadow size. The default value is 0. (the shadow is the same size as the blur).

Color, It colors the shadow. If this value is 0, the color used is determined by the browser.

Syntax:

box-shadow: [h-offset] [v-offset ] [blur radius]

Example:

<html>

<head>
    body {
    height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    }

    div {
    width: 100px;
    height: 100px;
    }
    .area {
    display: grid;
    gap: 3rem;
    grid-template-columns: repeat(3, 1fr);
    }

    div:nth-child(1) {
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    }
    div:nth-child(2) {
    box-shadow: 0.5rem 0.5rem black, -0.5rem -0.5rem #ccc;
    }
    div:nth-child(3) {
    box-shadow: 0 0 5px 5px red;
    }
    div:nth-child(4) {
    background: #eee;
    box-shadow: 0 8px 8px -4px lightblue;
    }
    div:nth-child(5) {
    border-radius: 50%;
    box-shadow: 0 0 50px #ccc;
    }
    div:nth-child(6) {
    box-shadow: 0 -5px 3px -3px black, 0 5px 3px -3px black;
    }
</head>

<body>
    <section class="area">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

</html>

What is webkit?

Webkit is Apple’s web browser engine, which is used in nearly all macOS apps. There are numerous other web browser engines, such as Gecko for Firefox and Blink for Edge. So the question of why we need them arises.

Similar to -moz properties, the -webkit prefix on CSS selectors denotes properties that are only intended to be processed by this engine. By specifying this, we are essentially instructing the browser to use this only when the specific browser engine is being used and to leave it alone otherwise. It is quite inconvenient to use, which is why many developers hope it is phased out soon.

Webkit-box-shadow: The CSS property webkit-box-shadow is used to apply a box-shadow. The webkit-box-shadow implementation is browser-specific for WebKit browsers such as Google Chrome and Safari.

Syntax:

webkit-box-shadow: h-offset v-offset blur;

Example:

<html>
<head>
   <style>
      .BoxShadow {
         color: black;
         border: solid 1px grey;
         margin: 1.5rem 3rem;
         -webkit-box-shadow: 5px 10px 18px red;
      }
   </style>
</head>
<body>
   <div class="BoxShadow">
      <h1>This webkit-box-shadow</h1>
      <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
   </div>
</body>
</html>

The following are some differences between box-shadow and -webkit-box-shadow properties:

Box-shadow:

The CSS standard implementation is the box-shadow.

The box-shadow property is only available in the most recent versions.

Webkit-box-shadow:

Webkit-box-shadow, on the other hand, is a browser-specific solution for WebKit browsers such as Google Chrome and Safari.

In older versions, the webkit-box-shadow property is used.

Conclusion

To conclude, the primary distinction between -webkit-box-shadow and box-shadow in CSS is that the latter is a vendor prefix for the box-shadow property introduced by Webkit browsers. The Box Shadow property enables you to apply a drop shadow effect to an element without the use of an image or another external resource. The -webkit-box-shadow property is no longer supported and has been replaced by the standard box-shadow syntax. Because it is supported by the vast majority of modern browsers. To summarise, both properties are used to cast shadows on elements, but only one should be used because the other will be deprecated in the future.

-webkit-box-shadow vs box-shadow in CSS

Table of contents

What is webkit?

Conclusion