Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Difference between -webkit-box-shadow & box-shadow in CSS
The CSS box-shadow property is used to add shadow effects around an element's frame. While most modern browsers support the standard box-shadow property, older webkit-based browsers required the -webkit-box-shadow vendor prefix.
Syntax
/* Standard syntax */
selector {
box-shadow: h-offset v-offset blur spread color inset;
}
/* Webkit prefix syntax */
selector {
-webkit-box-shadow: h-offset v-offset blur spread color inset;
}
Box-shadow Property
The box-shadow property creates one or more shadow effects on elements. Each shadow is specified with X and Y offsets, blur radius, spread radius, color, and an optional inset keyword.
The property accepts multiple values
Two values X and Y offsets
Three values X offset, Y offset, and blur radius
Four values X offset, Y offset, blur radius, and spread radius
Inset Optional keyword for inner shadows
Color Optional color value (defaults to current text color)
Example: Standard Box-shadow
The following example demonstrates the standard box-shadow property
<!DOCTYPE html>
<html>
<head>
<style>
.shadow-box {
width: 200px;
height: 100px;
background-color: #f0f8ff;
margin: 50px;
padding: 20px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
border-radius: 8px;
}
</style>
</head>
<body>
<div class="shadow-box">
<h3>Box Shadow Example</h3>
<p>This box has a standard shadow effect.</p>
</div>
</body>
</html>
A light blue box with rounded corners and a gray shadow offset 5px right and down with a 15px blur appears on the page.
Webkit Box-shadow Property
The -webkit-box-shadow property is a vendor-prefixed version used by webkit-based browsers like older versions of Safari and Chrome. It functions identically to the standard box-shadow property but requires the -webkit- prefix for compatibility.
Example: Webkit Box-shadow
The following example shows both webkit and standard syntax for maximum compatibility
<!DOCTYPE html>
<html>
<head>
<style>
.webkit-shadow {
width: 200px;
height: 100px;
background-color: #ffe4e1;
margin: 50px;
padding: 20px;
border: 1px solid #ff6b6b;
-webkit-box-shadow: 3px 3px 10px #ff6b6b;
box-shadow: 3px 3px 10px #ff6b6b;
}
</style>
</head>
<body>
<div class="webkit-shadow">
<h3>Webkit Compatible</h3>
<p>This uses both webkit and standard syntax.</p>
</div>
</body>
</html>
A light pink box with a red border and matching red shadow appears, compatible with both older webkit browsers and modern browsers.
Key Differences
| Aspect | box-shadow | -webkit-box-shadow |
|---|---|---|
| Browser Support | All modern browsers | Webkit-based browsers only |
| Status | Standard CSS property | Vendor prefix (deprecated) |
| Usage | Current standard | Legacy compatibility |
Best Practices
When using box shadows, include both the webkit prefix and standard property for maximum compatibility. Always place the webkit prefix before the standard property
.element {
-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
Conclusion
The main difference between -webkit-box-shadow and box-shadow is browser compatibility. The webkit prefix is deprecated and only needed for older browsers, while box-shadow is the modern standard supported by all current browsers.
943 Views
