MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Have you ever wondered how cards on modern websites look like they are floating gently above the screen, or how buttons appear to rise up toward you when you hover your mouse over them? 🪄
A computer screen is completely flat (2D). But by using Shadows, web designers create the illusion of physical Depth and 3D Elevation!
In this lesson, you will master:
box-shadow formulainset shadow for sunken or pressed effectstext-shadow property for glows and cinema titlesThink of the morning sunlight streaming through your classroom window:
+-------------------------------------------------------------------------+ | THE PHYSICS OF REAL-WORLD SHADOWS | +-------------------------------------------------------------------------+ | 1. HAND RESTING ON THE DESK (Low Elevation): | | • The shadow is tight, dark, and sharp (Blur: 2px). | | • The hand feels close to the table. | | | | 2. HAND LIFTED 1 FOOT IN THE AIR (High Elevation): | | • The shadow becomes much larger, softer, and diffused (Blur: 20px). | | • The hand feels like it is floating high above the table! | +-------------------------------------------------------------------------+
box-shadowA complete box-shadow declaration contains up to 5 values:
offset-x (Horizontal Shift):5px): Shadow moves to the right.-5px): Shadow moves to the left.0px: Shadow is centered directly behind the box.offset-y (Vertical Shift):8px): Shadow moves downwards (standard for overhead light).-8px): Shadow moves upwards.blur-radius (Fuzziness):0px: Completely sharp, hard-edged shadow.16px: Soft, natural, diffused blur.spread-radius (Optional Size Expansion):color:rgba()! (e.g., rgba(0, 0, 0, 0.08)). Solid pure black (#000) looks harsh, fake, and dated.Professional UI designers use a consistent elevation hierarchy to show importance:
You can combine box-shadow with transform: translateY() to make cards smoothly float up when hovered:
inset Shadow (Sunken / Pressed Effect)By adding the keyword inset, the shadow is drawn inside the box instead of outside. This creates a carved-out, sunken effect, perfect for pressed buttons, search inputs, or well containers:
text-shadow (Glows & Title Effects)Just like boxes, text can have its own drop shadow using text-shadow!
text-shadow: offset-x offset-y blur-radius color;
(Notice: text-shadow does NOT have a spread radius).
By setting both offset-x and offset-y to 0 and using a bright neon color with blur:
| What Beginners Do (Don't ❌) | What You Should Do Instead (Do ✅) | Why? |
|---|---|---|
Using solid black: box-shadow: 5px 5px 0 black; | Use rgba(0, 0, 0, 0.08). | Solid black shadows look like 1995 clip art. Soft translucent shadows mimic natural sunlight. |
Making shadows too dark (rgba(0,0,0,0.8)). | Keep alpha between 0.05 and 0.2. | Heavy dark shadows make your website look muddy and unrefined. |
Forgetting transition when changing shadow on hover. | Always add transition: all 0.2s ease;. | Without transition, the shadow will abruptly snap instead of smoothly gliding. |
box-shadow formula: offset-x offset-y blur-radius spread-radius color.rgba(0, 0, 0, 0.08) for realistic, soft shadows.inset keyword casts shadows inside the container for sunken buttons and search inputs.box-shadow with transform: translateY(-4px) for an interactive hover float effect.text-shadow adds depth to text and creates neon glow effects.Test your understanding with these multiple-choice questions:
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);, what does the value 8px represent?box-shadow declaration to make the shadow appear inside the element instead of outside?rgba(0, 0, 0, 0.1) over solid black for card shadows?text-shadow: 0 0 15px #38bdf8; produce on text?box-shadow but completely absent from text-shadow?floating-card.html.In the next lesson, we will continue your web styling journey with Styling Links with Pseudo-classes (Links, Lists and Tables Styling).
👉 Continue to Next Lesson: Styling Links with Pseudo-classes →
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| Border Radius: Rounded Corners, Pills, and Circular Avatars | Styling Links with Pseudo-classes |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.