Box Shadow Utilities in Tailwind CSS
Box Shadow Utilities in Tailwind CSS
Tailwind CSS provides a set of utility classes to apply and customize box shadows on elements. Box shadows add depth and dimension to your design by creating a shadow effect behind an element. These utilities allow you to apply shadows with various sizes, colors, and offsets, enhancing the visual hierarchy of your UI.
1. Basic Box Shadow Utilities
Tailwind CSS includes several predefined shadow utilities that range from subtle to prominent effects.
Utility Classes
shadow-sm: Small shadow.shadow: Default shadow.shadow-md: Medium shadow.shadow-lg: Large shadow.shadow-xl: Extra-large shadow.shadow-2xl: 2x extra-large shadow.shadow-inner: Inset shadow (shadow appears inside the element).shadow-none: Removes any shadow.
Example Usage:
Small Shadow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Small Shadow Example</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="shadow-sm p-4 bg-white">
Small shadow effect.
</div>
</body>
</html>
Large Shadow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Large Shadow Example</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="shadow-lg p-4 bg-white">
Large shadow effect.
</div>
</body>
</html>
Inset Shadow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inset Shadow Example</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="shadow-inner p-4 bg-white">
Inset shadow effect.
</div>
</body>
</html>
2. Customizing Box Shadows
Tailwind CSS allows for customization of shadow utilities in the tailwind.config.js file. This allows you to define your own shadow values and apply them as utilities.
Configuration Example
You can extend or modify the default shadow settings in your Tailwind configuration.
// tailwind.config.js
module.exports = {
theme: {
extend: {
boxShadow: {
'custom-light': '0 4px 8px rgba(0, 0, 0, 0.1)',
'custom-heavy': '0 8px 16px rgba(0, 0, 0, 0.3)',
},
},
},
}
Using Custom Shadows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Shadow Example</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="shadow-custom-light p-4 bg-white">
Custom light shadow effect.
</div>
<div class="shadow-custom-heavy p-4 mt-4 bg-white">
Custom heavy shadow effect.
</div>
</body>
</html>
3. Shadow Offsets and Blur
While the default shadows are predefined with specific offsets and blur values, you can create custom shadows by modifying the configuration to adjust these properties.
Shadow Properties
offset-x: Horizontal offset of the shadow.offset-y: Vertical offset of the shadow.blur-radius: Blur radius of the shadow.spread-radius: (Optional) Spread radius of the shadow.color: Color of the shadow.
Example Custom Shadow Configuration
// tailwind.config.js
module.exports = {
theme: {
extend: {
boxShadow: {
'custom-offset': '4px 8px 16px rgba(0, 0, 0, 0.25)',
'custom-blur': '0 0 10px rgba(0, 0, 0, 0.5)',
},
},
},
}
Using Shadows with Custom Offsets and Blur
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Offset and Blur Shadow Example</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="shadow-custom-offset p-4 bg-white">
Custom shadow with offset.
</div>
<div class="shadow-custom-blur p-4 mt-4 bg-white">
Custom shadow with blur.
</div>
</body>
</html>
Summary
Basic Shadow Utilities:
shadow-sm: Small shadow.shadow: Default shadow.shadow-md: Medium shadow.shadow-lg: Large shadow.shadow-xl: Extra-large shadow.shadow-2xl: 2x extra-large shadow.shadow-inner: Inset shadow.shadow-none: No shadow.
Custom Shadows:
- Extend the default shadows by adding custom values in
tailwind.config.js. - Adjust shadow properties such as offset, blur radius, and color.
- Extend the default shadows by adding custom values in