CSS Shadows

Mastering Shadows with Box-Shadow and Text-Shadow

1. Basic Box Shadow

The `box-shadow` property adds shadows to an element, defining horizontal and vertical offsets, blur radius, spread radius, and color.

/* Basic Box Shadow */
.box {
    box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.5);
}

Result:

2. Internal Shadow (`inset`)

The `inset` keyword applies the shadow inside the element, creating an inner shadow effect.

/* Internal Shadow */
.box {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5);
}

Result:

3. Text Shadows

The `text-shadow` property applies shadows to text, defining horizontal and vertical offsets, blur radius, and color.

/* Text Shadow */
.text {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

Result:

This text has a shadow effect.

4. Multiple Shadows

You can apply multiple shadows to an element by separating them with commas.

/* Multiple Shadows */
.box {
    box-shadow: 5px 5px red, -5px -5px blue;
}

Result:

5. Shadow Spread Radius

The `spread-radius` defines how much the shadow expands or shrinks.

/* Spread Radius */
.box {
    box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, 0.5);
}

Result:

6. Performance Considerations

Excessive use of shadows may impact performance, especially on low-powered devices.

/* Use shadows sparingly for better performance */
.box {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}

Result:

7. Shadow Accessibility

Ensure enough contrast between the shadow and background for readability and accessibility.

/* High-contrast Shadow */
.text {
    text-shadow: 1px 1px 3px black;
}

Result:

This text has a high-contrast shadow.

8. Shadow with Transparency

Use RGBA or HSLA colors for transparent shadows.

/* Transparent Shadow */
.box {
    box-shadow: 10px 10px 10px rgba(0, 0, 255, 0.3);
}

Result:

9. Shadow Generators

Use online tools like MDN's Box-Shadow Generator to create and visualize shadows.

/* Example Shadow from Generator */
.box {
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4);
}

Result:

10. Creative Shadow Effects

Shadows can create depth, realism, and aesthetic effects, such as cards or floating elements.

/* Card Effect */
.card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 15px;
    background: white;
}

Result:

This is a card with a shadow effect.

11. Hover Effects with Shadows

Shadows can be used to create interactive hover effects on elements, such as buttons or cards.

/* Hover Effect */
.button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    transition: box-shadow 0.3s ease-in-out;
}

.button:hover {
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
}

Result:

12. Soft Shadows

Use a large `blur-radius` to create soft, diffused shadows for a subtle effect.

/* Soft Shadow */
.box {
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
}

Result:

13. Neon Glow Effect

Shadows can be used to create glowing effects, especially with bright, vibrant colors.

/* Neon Glow Effect */
.glow {
    color: white;
    text-align: center;
    font-size: 24px;
    padding: 10px;
    text-shadow: 0px 0px 10px #00ffcc, 0px 0px 20px #00ffcc;
}

Result:

Neon Glow Effect

14. 3D Effect Using Shadows

Combine multiple shadows to give the illusion of depth, creating a 3D effect.

/* 3D Effect */
.box-3d {
    background-color: #ffffff;
    width: 100px;
    height: 100px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.7);
}

Result:

15. Asymmetrical Shadows

Use custom offsets to create unique asymmetrical shadow effects.

/* Asymmetrical Shadows */
.box {
    box-shadow: 15px 5px 20px rgba(0, 0, 0, 0.3);
}

Result:

Additional Resources