Open In App

Difference between -webkit-box-shadow & box-shadow in CSS

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will find difference between ‘webkit-box-shadow’ & ‘box-shadow’ in CSS.

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

  • Syntax:
    webkit-box-shadow: h-offset v-offset blur;
  • Advantage: If we use -webkit-box-shadow the old versions of browsers support it.

Box-shadow: The box-shadow property in CSS is used to apply a box-shadow. The box-shadow is the CSS standard implementation.

  • Syntax: 
    box-shadow: h-offset v-offset blur;
  • Advantage: If we use box-shadow latest versions of browsers support it.

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

Box-shadow Webkit-box-shadow     
The box-shadow is the CSS standard implementation. While the webkit-box-shadow is a browser-specific implementation for WebKit Browsers like Google Chrome and Safari.
The box-shadow property is for the latest versions. Whereas the webkit-box-shadow property is used for older versions.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        .gfg1{
            color: green;
            cursor: zoom-in;
            border: solid 2px red;
            margin: 10% 30%;
            width: 50%;
            box-shadow: 5px 10px 18px red;
            -webkit-box-shadow: 5px 10px 18px red;
        }
    </style>
</head>
  
<body>
    <div class="gfg1">
        <h1>GeeksforGeeks</h1>
        <p>box-shadow</p>
  
    </div>
</body>
  
</html>


Output:


Last Updated : 26 Apr, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads