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
Selected Reading
How to set the inset shadow using CSS?
The CSS box-shadow property creates shadows around elements, and by default applies shadows outside the element. However, by adding the inset keyword, you can create shadows that appear inside the element, giving it a recessed or indented appearance.
Syntax
selector {
box-shadow: inset x-offset y-offset blur spread color;
}
Parameters
| Parameter | Description |
|---|---|
inset |
Makes the shadow appear inside the element |
x-offset |
Horizontal shadow offset (required) |
y-offset |
Vertical shadow offset (required) |
blur |
Blur radius (optional, default is 0) |
spread |
Spread distance (optional, default is 0) |
color |
Shadow color (optional, default is current text color) |
Example 1: Basic Inset Shadow
This example demonstrates a simple inset shadow effect
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
justify-content: center;
padding: 20px;
}
.normal-shadow {
width: 200px;
height: 100px;
background-color: #f0f0f0;
border-radius: 10px;
padding: 20px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}
.inset-shadow {
width: 200px;
height: 100px;
background-color: #f0f0f0;
border-radius: 10px;
padding: 20px;
box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="container">
<div class="normal-shadow">Normal Shadow</div>
<div class="inset-shadow">Inset Shadow</div>
</div>
</body>
</html>
Two boxes appear side by side. The left box has a shadow extending outward from its edges, while the right box has a shadow that appears pressed inward, creating a recessed effect.
Example 2: Multiple Inset Shadows
You can combine multiple inset shadows for more sophisticated effects
<!DOCTYPE html>
<html>
<head>
<style>
.advanced-inset {
width: 300px;
height: 150px;
background-color: #e8e8e8;
border-radius: 15px;
padding: 30px;
margin: 20px auto;
box-shadow:
inset 5px 5px 10px rgba(0, 0, 0, 0.4),
inset -5px -5px 10px rgba(255, 255, 255, 0.8);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<div class="advanced-inset">
Multiple Inset Shadows
</div>
</body>
</html>
A rounded box with a sophisticated 3D inset effect appears. The combination of dark and light shadows creates a realistic pressed-in appearance with depth and dimension.
Key Points
- The
insetkeyword must come first in the box-shadow declaration - Multiple inset shadows can be combined using comma separation
- Inset shadows work well with light backgrounds and subtle color variations
- Combining dark and light inset shadows creates realistic 3D effects
Conclusion
The inset keyword in CSS box-shadow property creates interior shadows that make elements appear pressed inward. This technique is perfect for creating realistic button states, form inputs, and decorative containers with depth.
Updated on: 2026-03-15T18:03:55+05:30
391 Views
Advertisements