📘 Lesson · Lesson 35
Box and Text Shadows
Box और Text Shadows
box-shadow Basics
.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}A card floating with a soft shadow
box-shadow adds a shadow around an element's box, creating a sense of depth and elevation — making cards, buttons, and popups look like they float above the page. This is one of the most important properties for modern, polished design: that clean "card" look everywhere on the web comes largely from a well-judged box-shadow. A soft, subtle shadow instantly makes a flat element feel three-dimensional and lifts it off the background.
The Four Values — decoding the shadow
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
│ │ │ │
X Y blur color
offset offset radius| Value | Meaning |
|---|---|
| X offset | Horizontal shadow position (positive = right) |
| Y offset | Vertical shadow position (positive = down) |
| blur radius | How soft/fuzzy the shadow is (bigger = softer) |
| (spread) | Optional: how much the shadow grows/shrinks |
| color | Shadow colour (usually semi-transparent black) |
Reading a box-shadow: X offset, Y offset, blur, then colour.
0 4px 8px rgba(0,0,0,0.1) means: no horizontal shift, 4px down, 8px of blur, in 10%-opacity black. The key to good shadows is subtlety — use a small offset, a generous blur, and a LOW-opacity black (rgba(0,0,0,0.1) not solid black). Harsh, dark, offset shadows look amateurish; soft, faint ones look professional. Notice the shadow points DOWN (positive Y) because light naturally comes from above — matching real-world lighting makes shadows believable.inset Shadows — shadow on the inside
.pressed {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}Adding the keyword inset flips the shadow to the INSIDE of the element, making it look pressed IN or carved out rather than raised up. This is used for input fields (a subtle inner shadow makes them look like a recessed well you type into), pressed-button states, and inset panels. Same four values, just directed inward. It's the opposite feel of a normal shadow: normal shadow = element pops OUT toward you; inset shadow = element sinks IN. A handy tool for that "pressed" or "inset" look.
text-shadow — shadows on text
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
/* A glow effect (no offset, colored blur): */
.glow {
text-shadow: 0 0 10px #60a5fa;
}text-shadow works just like box-shadow but for text — same X, Y, blur, colour structure (no spread). Its most valuable real use is readability: a subtle dark text-shadow behind white text placed over a busy image keeps the text legible no matter what's behind it (remember the hero-banner problem?). It's also used for decorative glow effects — set offsets to 0 and use a coloured blur, and the text appears to glow. Use text-shadow sparingly on body text (it can hurt clarity), but it's genuinely useful for headings over images and occasional accents.Creating Depth — layering shadows
/* You can stack MULTIPLE shadows, comma-separated: */
.card {
box-shadow:
0 1px 3px rgba(0,0,0,0.12),
0 4px 12px rgba(0,0,0,0.08);
}
/* A common hover effect: lift the card with a bigger shadow */
.card { transition: box-shadow 0.3s, transform 0.3s; }
.card:hover {
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
transform: translateY(-4px);
}Two pro techniques for realistic depth: First, you can layer MULTIPLE shadows (comma-separated) — a tight, subtle one plus a softer, larger one mimics how real objects cast complex shadows, giving a richer, more believable elevation. Second, the beloved card hover-lift: combine everything you've learned — on hover, increase the shadow AND translate the card up (
translateY(-4px)), with a transition to smooth it. The card appears to rise toward the user's cursor. This single effect, built from shadow + transform + transition, is one of the most satisfying and widely-used interactions in modern web design.Exam Corner
Q: What are box-shadow's main values in order? X offset, Y offset, blur radius, (optional spread), colour.
Q: What's the secret to a professional-looking shadow? Subtlety — small offset, generous blur, low-opacity black.
Q: What does the inset keyword do? Puts the shadow inside the element, making it look pressed in.
Q: What is text-shadow most useful for? Keeping text readable over busy backgrounds, and glow effects.
Q: How do you make a card lift on hover? Increase box-shadow and translateY(-4px) on :hover, with a transition.
Q: What's the secret to a professional-looking shadow? Subtlety — small offset, generous blur, low-opacity black.
Q: What does the inset keyword do? Puts the shadow inside the element, making it look pressed in.
Q: What is text-shadow most useful for? Keeping text readable over busy backgrounds, and glow effects.
Q: How do you make a card lift on hover? Increase box-shadow and translateY(-4px) on :hover, with a transition.
box-shadow Basics
.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}Soft shadow ke saath float karta card
box-shadow element के box के चारों ओर shadow जोड़ता है, depth और elevation का एहसास बनाते — cards, buttons, और popups को page के ऊपर तैरता दिखाते. यह modern, polished design के लिए सबसे ज़रूरी properties में से एक है: web पर हर जगह वह साफ "card" look काफी हद तक अच्छे चुने box-shadow से आता है. एक soft, subtle shadow तुरंत flat element को त्रि-आयामी महसूस कराता है और उसे background से उठा देता है.
चार Values — shadow decode करना
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
│ │ │ │
X Y blur color
offset offset radius| Value | मतलब |
|---|---|
| X offset | Horizontal shadow स्थिति (positive = right) |
| Y offset | Vertical shadow स्थिति (positive = down) |
| blur radius | Shadow कितना soft/धुंधला (बड़ा = softer) |
| (spread) | Optional: shadow कितना बढ़े/घटे |
| color | Shadow colour (आमतौर पर semi-transparent black) |
box-shadow पढ़ना: X offset, Y offset, blur, फिर colour.
0 4px 8px rgba(0,0,0,0.1) मतलब: कोई horizontal shift नहीं, 4px नीचे, 8px blur, 10%-opacity black में. अच्छे shadows की चाबी subtlety है — छोटा offset, उदार blur, और LOW-opacity black (rgba(0,0,0,0.1) न कि solid black). कठोर, गहरे, offset shadows amateurish दिखते हैं; soft, हल्के professional. ध्यान दीजिए shadow NEECHE point करता है (positive Y) क्योंकि रोशनी स्वाभाविक रूप से ऊपर से आती है — असली दुनिया की lighting match करना shadows को विश्वसनीय बनाता है.inset Shadows — अंदर की shadow
.pressed {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}Keyword inset जोड़ना shadow को element के ANDAR flip करता है, जिससे यह उठे होने के बजाय दबा हुआ या खुदा हुआ दिखता है. यह input fields के लिए use होता है (subtle inner shadow उन्हें एक धंसा हुआ कुआं दिखाता है जिसमें आप type करते हैं), pressed-button states, और inset panels. वही चार values, बस अंदर की ओर निर्देशित. यह normal shadow का उल्टा feel है: normal shadow = element आपकी ओर POP करता है; inset shadow = element अंदर धंसता है. उस "pressed" या "inset" look के लिए काम का tool.
text-shadow — text पर shadows
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
/* Glow effect (koi offset nahi, colored blur): */
.glow {
text-shadow: 0 0 10px #60a5fa;
}text-shadow box-shadow जैसा ही काम करता है पर text के लिए — वही X, Y, blur, colour structure (कोई spread नहीं). इसका सबसे मूल्यवान असली इस्तेमाल readability है: busy image के ऊपर रखे white text के पीछे subtle dark text-shadow text को legible रखता है चाहे पीछे कुछ भी हो (hero-banner problem याद है?). यह decorative glow effects के लिए भी use होता है — offsets 0 set कीजिए और coloured blur use कीजिए, और text glow करता दिखता है. Body text पर text-shadow कम use कीजिए (यह clarity नुकसान कर सकता है), पर images के ऊपर headings और कभी-कभार accents के लिए सच में उपयोगी है.Depth बनाना — shadows layering
/* KAI shadows stack kar sakte hain, comma-separated: */
.card {
box-shadow:
0 1px 3px rgba(0,0,0,0.12),
0 4px 12px rgba(0,0,0,0.08);
}
/* Common hover effect: card ko bade shadow se uthao */
.card { transition: box-shadow 0.3s, transform 0.3s; }
.card:hover {
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
transform: translateY(-4px);
}यथार्थवादी depth के दो pro techniques: पहला, आप KAI shadows layer कर सकते हैं (comma-separated) — एक तंग, subtle plus एक softer, बड़ा असली objects के जटिल shadows की नकल करता है, समृद्ध, ज़्यादा विश्वसनीय elevation देते. दूसरा, प्रिय card hover-lift: सब कुछ combine कीजिए जो आपने सीखा — hover पर, shadow बढ़ाइए AUR card ऊपर translate कीजिए (
translateY(-4px)), smooth करने को transition के साथ. Card user के cursor की ओर उठता दिखता है. यह एक effect, shadow + transform + transition से बना, modern web design के सबसे संतोषजनक और व्यापक रूप से इस्तेमाल किए interactions में से एक है.Exam Corner
Q: box-shadow की मुख्य values order में क्या हैं? X offset, Y offset, blur radius, (optional spread), colour.
Q: Professional दिखने वाले shadow का राज़? Subtlety — छोटा offset, उदार blur, low-opacity black.
Q: inset keyword क्या करता है? Shadow को element के अंदर रखता है, दबा हुआ दिखाते.
Q: text-shadow किसके लिए सबसे उपयोगी है? Busy backgrounds के ऊपर text readable रखने, और glow effects के लिए.
Q: Card को hover पर lift कैसे कराते हैं? :hover पर box-shadow बढ़ाइए और translateY(-4px), transition के साथ.
Q: Professional दिखने वाले shadow का राज़? Subtlety — छोटा offset, उदार blur, low-opacity black.
Q: inset keyword क्या करता है? Shadow को element के अंदर रखता है, दबा हुआ दिखाते.
Q: text-shadow किसके लिए सबसे उपयोगी है? Busy backgrounds के ऊपर text readable रखने, और glow effects के लिए.
Q: Card को hover पर lift कैसे कराते हैं? :hover पर box-shadow बढ़ाइए और translateY(-4px), transition के साथ.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.