CSS Text Shadow Property
CSS Text Shadow Property
CSS text-shadow is property used to add a shadow effect to text.
text look stylish ,attractive and sometimes easier to read.
Syntax of Text Shadow
text-shadow: horizontal-shadow vertical-shadow blur-radius color;
✅ Horizontal Shadow (Required)
- Positive value ➡ right
- Negative value ➡ left
✅ Vertical Shadow (Required)
- Positive value ➡ down
- Negative value ➡ up
✅ Blur Radius (Optional)
- Controls Softness of shadow
- 0 ➡ sharp shadow
✅ Color (optional but Recommended)
- Defines shadow color
Why We Use Text Shadow
✔ Enhance website Ul
✔ Design attractive headings
✔ Create 3D or glowing effects.
✔ Improve text visibility
Real World Use
- Website headings
- Logo design
- Hero section titles
- Buttons
- Banner text
Why Use Text-shadow
- Improve text visibility
- Create 3D effect
- Create glow effect
- Make headings stylish
CSS Text Shadow Property
Examples
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px blue;
}
h2{
text-shadow:2px 2px 2px pink;
}
</style>
</head>
<body>
<h1>CSS Text Shadow Property</h1>
<h2>https://webdesigningtheory.blogspot.com/ </h2>
</body>
</html>
CSS Text Shadow Property
Explain Program
<!DOCTYPE html>
- This declare the document type.
- browser that the document is written in html
Step 2]
<html>.... . </html>
- html is the root element of the html page.
- Every thing inside it is part of the webpage.
Step 3]
<head>
- <head> section contains metadata and css styles,not visible content.
- Contains styles, metadata and page setting
Step 4]
<style> tag Internal CSS Section
<style>
h1 {
text-shadow: 2px 2px blue;
}
h2{
text-shadow:2px 2px 2px pink;
}
Applies a text shadow all <h1> and <h2> element.
✔ 2px ➡ Horizontal shadow (moves right).
✔ 2px ➡ Vertical shadow (moves down).
✔ 2px ➡ Blue effect.
✔ Pink ➡ Shadow color.
Step 5]
Closing tag
<</style>
</head>
Step 6]
<body> section
<h1>CSS Text Shadow Property</h1>
<h2>https://webdesigningtheory.blogspot.com/ </h2>
- <h1> displays main heading with blue shadow.
- <h2> display website link text with soft pink shadow.
Step 7]
closing the Tag
</body> </html>
CSS Text Shadow Property
Output
Related Post :-
Comments
Post a Comment