Currently Empty: ₹0.00
CSS Text Shadow
CSS CODES & EXAMPLES
CSS Text Shadow
Learn how to create professional shadows, glow effects, neon text,
3D typography and attractive heading effects using the CSS
text-shadow property.
01
What is text-shadow?
Add visual shadows behind text
The CSS text-shadow property adds one or more shadows
around text. It can be used to create depth, emphasis, glow,
neon and decorative typography effects.
Syntax:
text-shadow: horizontal vertical blur color;
02
Basic text-shadow Syntax
Start with a simple shadowbasic-shadow.css
h1 {
text-shadow: 3px 3px 5px #888;
}CSS TEXT SHADOW
03
Horizontal Shadow Offset
Control the X-axis shadow positionThe first value controls the horizontal position of the shadow. A positive value moves the shadow to the right.
horizontal-shadow.css
h2 {
text-shadow: 8px 0 4px #9aa;
}Horizontal Shadow
04
Vertical Shadow Offset
Control the Y-axis shadow positionThe second value controls the vertical position of the shadow. A positive value moves the shadow downward.
vertical-shadow.css
h2 {
text-shadow: 0 8px 4px #9aa;
}Vertical Shadow
05
Blur Radius
Create soft and smooth shadowsThe third value specifies the blur radius. A larger value creates a softer and more diffused shadow.
0px BLUR
Shadow
5px BLUR
Shadow
15px BLUR
Shadow
06
Shadow Color
Choose a custom shadow colorThe final value specifies the color of the shadow. You can use named colors, HEX, RGB, RGBA, HSL and other CSS color formats.
Dark Shadow
Blue Shadow
Red Shadow
07
Multiple Text Shadows
Apply more than one shadowMultiple shadows can be separated with commas. This allows you to create complex and decorative text effects.
multiple-shadow.css
h1 {
text-shadow:
2px 2px 0 #1769d5,
4px 4px 0 #0d3d7a;
}SNCEC
08
Glow Text Effect
Create a soft glowing effectDIGITAL LEARNING
glow-effect.css
h2 {
color: #fff;
text-shadow:
0 0 5px #1769d5,
0 0 15px #1769d5,
0 0 30px #1769d5;
}09
Neon Text Effect
Create a bright neon-style headingNEON CSS
Modern Typography
neon-text.css
h1 {
color: #fff;
text-shadow:
0 0 5px #fff,
0 0 10px #1769d5,
0 0 20px #1769d5,
0 0 40px #1769d5;
}10
3D Text Effect
Create depth using multiple shadows3D TEXT
3d-text.css
h1 {
color: #fff;
text-shadow:
1px 1px 0 #aaa,
2px 2px 0 #999,
3px 3px 0 #888,
4px 4px 0 #777;
}11
Text Shadow on Headings
Improve visual hierarchy
CSS COURSE
Learn CSS Step by Step
Build professional and responsive websites.
heading-shadow.css
h2 {
color: #fff;
text-shadow: 2px 3px 8px rgba(0,0,0,.35);
}12
Text Shadow on Buttons
Create stronger call-to-action textbutton-shadow.css
button {
text-shadow: 1px 1px 2px rgba(0,0,0,.35);
}13
Text Shadow on Course Cards
Practical education website example
FEATURED COURSE
Diploma in Computer Application
Learn computer fundamentals, Microsoft Office, internet, digital services and practical computer applications.
VIEW COURSE14
Practical Website Examples
Where text-shadow can be useful
Hero Headings
Add subtle depth to large website headlines.
Course Titles
Highlight important course information.
Buttons
Add a subtle visual effect to CTA buttons.
Dark Sections
Glow effects work especially well on dark backgrounds.
15
Best Practices
Use text shadows professionally
✓ Keep shadows subtle
Small shadows usually look more professional than very heavy effects.
✓ Maintain readability
Never allow a shadow to reduce text contrast or readability.
✓ Use glow carefully
Neon and glow effects are best used for special visual elements.
✓ Match the design
Choose shadow colors that complement the website color palette.
16
Practice Task
Test your CSS Text Shadow skills🎯 Your Challenge
Create a professional course hero section using
text-shadow.
- Add a subtle shadow to the main heading.
- Create a glow effect on a small label.
- Add text shadow to a button.
- Create a 3D text effect.
- Experiment with multiple shadows.
17
CSS Text Shadow Live Runner
Experiment with real CSS examples
LIVE PREVIEW
18
Quick Reference
Remember the text-shadow syntaxtext-shadow
Adds one or more shadows to text.
horizontal offset
Controls the left and right position.
vertical offset
Controls the up and down position.
blur radius
Controls how soft the shadow appears.
color
Defines the shadow color.
multiple shadows
Separate multiple shadows using commas.