CSS – Difference between webkit-box-shadow and box-shadow
CSS – Differences between webkit-box-shadow and box-shadow
As we know, CSS provides us with a large number of properties and pseudo-classes that allow developers to add desired styles to elements. One of these properties is the box-shadow property, which allows us to add a shadow-like effect around an element.
Box-shadow Property
Box-shadow is a CSS property used to create an outer or inner shadow effect on an element. It applies one or more shadows to an element, each specifying an X and Y offset from the element, a blur radius, a spread radius, a color, and an opacity value.
The box-shadow property accepts multiple comma-separated values; each value defines a single shadow effect. Applying a box shadow without any offset will make it appear as a flat shape, as if printed on paper.
Assuming the element we’re applying the box shadow to has some sort of border radius specified, the box shadow will have a curved border, similar to the element’s border. Multiple box shadows are ordered the same way on the Z axis as multiple text shadows.
We can assign a box shadow to an element using the following methods:
- Two Values – Whenever we use two values for the box-shadow property, they are used as X and Y offsets.
-
Three Values – The first two values act as X and Y offsets, while the third value is used for the blur radius.
-
Four Values – The fourth value is used as the spread radius, while the remaining values act as the X offset, Y offset, and blur radius, respectively.
-
Inset – This is an optional value that tilts the shadow to one side. If we don’t specify this, the shadow will appear to be elevated, like a water drop shadow.
-
Color – This is another optional value that sets the color of the shadow. If not specified, the color defaults to the element’s current color.
Its initial value is none and applies to all elements. It can be animated using the shadow list animation type, but it does not inherit.
Example
The following is an example of using the box-shadow property in CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Box Shadow</title>
<style>
blockquote { padding: 20px;
box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<blockquote>
<q>
This is an example of box shadow effect on elements <br />
Another temporary line for extra text
</q>
<p>— Example of Box Shadow</p>
</blockquote>
</body>
</html>
Now that we know the box shadow property, we’ll look at what “webkit” is in CSS and why we need it. After that, we’ll discuss webkit box shadows.
What is WebKit?
WebKit is Apple’s web browser engine, used by almost all macOS apps. There are many other web browser engines, such as Gecko for Firefox, Blink for Edge, and so on. So, why do we need them?
The -webkit prefix on CSS selectors indicates properties that are only handled by that engine, similar to the -moz property. By specifying this prefix, we’re essentially telling the browser to use it only when using a specific browser engine, and otherwise leave it as is. It’s quite cumbersome to use; that’s why many developers want to stop using it as soon as possible.
Webkit-box-shadow Property in CSS
Like the box-shadow property, the webkit-box-shadow property adds a shadow-like effect to the frame of the element it is applied to. However, it is important to note that its implementation is specific to browsers like Chrome or Apple’s Safari.
The possible values for this property are
- X-offset – This specifies the horizontal offset or distance from the element.
-
Y-offset – This also specifies an offset or distance, but in the vertical direction.
-
Blur – This is a length value. If it is a large value, the blur effect created will also be large, so the shadow effect will be large, and vice versa.
Example
Below is an example of using webkit-box-shadow in CSS.
<!DOCTYPE html>
<html>
<head>
<style>
.BoxShadow {
color: blue;
border: solid 1px blue;
margin: 1.5rem 3rem;
-webkit-box-shadow: 5px 10px 18px red;
}
</style>
</head>
<body>
<div class="BoxShadow">
<h1>Sample text</h1>
<p>Some more random text</p>
</div>
</body>
</html>
Differences between box-shadow and webkit-box-shadow
Now that we know the two properties, let’s list the differences between them.
- The box-shadow property is universally implemented, while ‘webkitbox-shadow’, on the other hand, only works on browsers using specific web browser engines, namely Safari or Google Chrome.
-
The box-shadow property allows us to design shadow effects in all recent versions, but if we must work on older browsers, we must use webkit-box-shadow.
Conclusion
In summary, the main difference between -webkit-box-shadow and box-shadow in CSS is that -webkit-box-shadow is a vendor prefix for the box-shadow property introduced by Webkit browsers. The box-shadow property allows you to apply shadow effects to elements without using https://coder-cafe.com/wp-content/uploads/2025/09/images or other external resources. The -webkit-box-shadow property has been deprecated and replaced by the standard box-shadow syntax, as it is supported by most modern browsers. In summary, both properties are used to create shadows on elements, but you should only use one, as the other will become deprecated over time.