7.1 The text-shadow Property
The text-shadow property in CSS lets you add shadows to text, creating a 3D effect that improves its visual appearance.
This property offers flexibility in setting shadows, including control over offset, blur, and shadow color.
The text-shadow property sets a shadow for the text inside an element. It allows you to control position, blur,
and color of the shadow, adding a visual highlight to text elements.
Syntax:
element {
text-shadow: offset-x offset-y blur-radius spread-radius color;
}
Parameters:
offset-x: horizontal shadow offsetoffset-y: vertical shadow offsetblur-radius: shadow blur radius (optional)color: shadow color (optional)
Values:
offset-xandoffset-y: set the shadow's position relative to the text. Can be positive or negative valuesblur-radius: defines the shadow's blur level. The higher the value, the more blurred the shadow will be. Default value is 0 (no blur)color: sets the shadow's color. If not specified, the text color is used
Usage Example:
.shadow-basic {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
.shadow-blur {
font-size: 24px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.shadow-color {
font-size: 24px;
text-shadow: 2px 2px 2px red;
}
.shadow-multiple {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 2px rgba(0, 0, 0, 0.3);
}
<body>
<p class="shadow-basic">Basic Shadow</p>
<p class="shadow-blur">Blurred Shadow</p>
<p class="shadow-color">Colored Shadow</p>
<p class="shadow-multiple">Multiple Shadows</p>
</body>
Code Explanation:
.shadow-basic: applies a simple shadow with2pxhorizontal and vertical offset,2pxblur radius, and semi-transparent black color.shadow-blur: adds more blur (5px), creating a more blurred shadow.shadow-color: applies a colored shadow (red).shadow-multiple: applies two shadows with different offsets and blurs, creating a complex multi-layered effect
7.2 Examples
1. Soft Shadow
Soft shadow with a large blur radius:
.soft-shadow {
font-size: 24px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
<body>
<p class="soft-shadow">Soft Text Shadow</p>
</body>
Code Explanation:
.soft-shadow: applies a soft shadow with no offset and a large blur radius (10px), creating a light glowing effect around the text
2. Bright Shadow
Shadow with a bright color and small blur:
.colorful-shadow {
font-size: 24px;
text-shadow: 3px 3px 5px blue;
}
<body>
<p class="colorful-shadow">Bright Color Shadow</p>
</body>
Code Explanation:
.colorful-shadow: applies a shadow with a bright color (blue),3pxoffset, and5pxblur radius
3. Multiple Shadows
Multiple shadows with different parameters:
.multi-shadow {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(255, 0, 0, 0.5);
}
<body>
<p class="multi-shadow">Text with Multiple Shadows</p>
</body>
Code Explanation:
.multi-shadow: applies two shadows with different parameters: one with small offset and blur, and another with larger offset and blur with red color
7.3 Key Points
Key points when using text-shadow
Browser Compatibility
The text-shadow property is supported by all modern browsers including Google Chrome, Firefox, Safari, Edge, and Opera.
However, it's important to check shadow rendering in older browser versions for cross-browser compatibility.
Performance
Using complex shadows with many offsets and blurs can affect performance, especially on mobile devices. Optimize shadows for better performance and test on various devices.
Accessibility
Ensure shadows don't degrade text readability. The contrast between the text and background should remain sufficient for all users, including those with visual impairments.
The text-shadow property provides solid tools for creating text shadows in CSS. It can add various
effects, from simple shadows to complex, multi-layered shadows with different colors and blurs.
Using text-shadow helps enhance the visual perception of text, adding depth and volume to web page design. It's important to keep in mind browser compatibility and performance when applying complex shadows, and also consider accessibility for all users.
GO TO FULL VERSION