CSS Shadows

Shadows make web pages look modern by giving elements a three-dimensional appearance. They help highlight important content and improve the overall user interface.

Why Use CSS Shadows?

• Create depth and elevation.
• Highlight buttons and cards.
• Improve visual appearance.
• Create attractive hover effects.
• Enhance readability of text.

.box{

    box-shadow:5px 5px 10px gray;

}

The box-shadow property adds one or more shadows around an HTML element.

.card{

    box-shadow:8px 8px 15px gray;

}

A box shadow is created using several values that control its position, blur, size, and color.

box-shadow:
10px 10px 15px 5px gray;

.box{

    box-shadow:
    5px 5px 10px
    rgba(0,0,0,0.4);

}

CSS allows multiple shadows by separating each shadow with a comma. This creates rich and layered shadow effects.

.box{

    box-shadow:

    2px 2px 5px gray,

    -2px -2px 5px lightgray;

}

The text-shadow property adds a shadow to text, making headings and titles more attractive.

h1{

    text-shadow:

    2px 2px 4px gray;

}

h2{

    text-shadow:

    1px 1px 3px blue;

}

The inset keyword creates an inner shadow inside an element instead of outside it. Inset shadows are commonly used to create pressed buttons, input fields, and modern UI effects.

.box{

    box-shadow:

    inset 4px 4px 8px gray;

}

.input{

    box-shadow:

    inset 0 2px 5px rgba(0,0,0,0.3);

}

Example 1 : Card Shadow

.card{

    box-shadow:

    0 4px 10px rgba(0,0,0,0.2);

}

Example 2 : Button Shadow

button{

    box-shadow:

    2px 2px 6px gray;

}

Example 3 : Image Shadow

img{

    box-shadow:

    5px 5px 15px rgba(0,0,0,0.4);

}

Example 4 : Text Shadow

h1{

    text-shadow:

    2px 2px 5px gray;

}

Combining shadows with the :hover pseudo-class creates interactive and attractive user interface effects.

.card{

    box-shadow:

    2px 2px 6px gray;

}

.card:hover{

    box-shadow:

    8px 8px 20px gray;

}

button:hover{

    box-shadow:

    0 6px 15px rgba(0,0,0,0.4);

}

• Adds depth to web elements.
• Improves user interface design.
• Highlights important content.
• Creates attractive hover effects.
• Works without image files.
• Easy to customize using CSS.
• Enhances readability with text shadows.

.card{

    box-shadow:

    0 8px 20px rgba(0,0,0,0.25);

}

h1{

    text-shadow:

    2px 2px 5px gray;

}

Using CSS shadows correctly improves the appearance of your website without making the design look cluttered.

• Use subtle shadows for a clean and professional design.
• Maintain consistency throughout the website.
• Choose appropriate blur and spread values.
• Avoid extremely dark or oversized shadows.
• Use hover shadows to improve user interaction.
• Combine shadows with border-radius for modern UI.
• Test shadows on different screen sizes.
• Keep text shadows light to maintain readability.

❌ Poor

box-shadow:20px 20px 40px black;

✔ Better

box-shadow:0 4px 10px rgba(0,0,0,0.2);

Both box-shadow and text-shadow are fully supported in all modern web browsers.

1. What is the purpose of the box-shadow property?
2. What is the difference between box-shadow and text-shadow?
3. What does the inset keyword do?
4. How do you create multiple shadows?
5. What is the purpose of the blur radius?
6. What is the spread radius in box-shadow?
7. How can shadows improve UI design?
8. Can shadows be animated with CSS transitions?
9. Which elements commonly use box-shadow?
10. Are CSS shadows supported by modern browsers?

In this lesson, you learned:

• ✔ Introduction to CSS Shadows.
• ✔ The box-shadow property.
• ✔ Shadow values and syntax.
• ✔ Multiple box shadows.
• ✔ The text-shadow property.
• ✔ Inset shadows.
• ✔ Practical examples and hover effects.
• ✔ Advantages of CSS shadows.
• ✔ Best Practices and Common Mistakes.
• ✔ Browser Support and Interview Questions.