CSS Shadows

CSS provides powerful shadow effects that can enhance your web design. There are two main types of shadows in CSS:

• Text Shadows: Applied to text elements using text-shadow.
• Box Shadows: Applied to elements like divs and buttons using box-shadow.

1. Text Shadows

The text-shadow property adds shadow effects to text.

h1 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

Syntax:

• 2px → Horizontal shadow
• 2px → Vertical shadow
• 5px → Blur radius
• rgba(0, 0, 0, 0.5) → Shadow color with transparency

2. Multiple Text Shadows

You can add multiple shadows for layered effects.

h1 {
    text-shadow: 2px 2px 3px black, -2px -2px 3px gray;
}

3. Box Shadows

The box-shadow property adds shadows to elements like divs and buttons.

.box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

Syntax:

• 5px → Horizontal offset
• 5px → Vertical offset
• 10px → Blur radius
• rgba(0, 0, 0, 0.5) → Shadow color

4. Inset Shadows

Inset shadows create an effect where the shadow appears inside the element.

.inset-box {
    width: 200px;
    height: 100px;
    background-color: lightgray;
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5);
}

5. Multiple Box Shadows

Similar to text-shadow, you can apply multiple box shadows.

.multi-shadow {
    width: 200px;
    height: 100px;
    background-color: white;
    box-shadow: 3px 3px 5px gray, -3px -3px 5px lightgray;
}

6. Neumorphism Effect

Neumorphism is a modern UI design trend that uses subtle shadows.

.neumorphism {
    width: 200px;
    height: 100px;
    background: #f0f0f0;
    border-radius: 10px;
    box-shadow: 5px 5px 10px #b0b0b0, -5px -5px 10px #ffffff;
}

Conclusion

CSS shadows add depth and style to web elements. You can use text-shadow for text effects and box-shadow for element shadows, including advanced styles like inset shadows and neumorphism.