CSS  

CSS Shadows – Text Shadow & Box Shadow Tricks

CSS shadows are one of the easiest ways to make your UI look polished, modern, and visually appealing. With just a few lines of CSS, you can create stunning effects like neon text, floating cards, glowing buttons, 3D elements, soft UI, and more.

In this blog, we’ll explore:

1. What is text-shadow
2. What is box-shadow
3. Real-time examples
4. Advanced shadow tricks used by modern UI designers

1. What Is text-shadow?

text-shadow applies a shadow behind the text.

Syntax

text-shadow: offset-x offset-y blur-radius color;

Simple Example

<h1 class="simple-text">Shadow Text</h1>

<style>
.simple-text {
    font-size: 48px;
    text-shadow: 2px 2px 4px gray;
}
</style>

2. Advanced Text Shadow Examples

2.1 Neon Glow Text

<h1 class="neon">NEON EFFECT</h1>

<style>
.neon {
    font-size: 60px;
    color: #fff;
    text-shadow: 
        0 0 10px #00fff2,
        0 0 20px #00fff2,
        0 0 40px #00fff2;
}
</style>

Where used?
– Gaming websites
– Dark-mode dashboards
– Modern landing pages

2.2 3D Text Effect

<h1 class="threeD">3D TEXT</h1>

<style>
.threeD {
    font-size: 70px;
    color: #222;
    text-shadow: 
        2px 2px 0px #e74c3c,
        4px 4px 0px #3498db;
}
</style>

Looks like:
Text lifted with two layers of colored shadows.

2.3 Embossed / Engraved Text

<h1 class="emboss">Embossed Effect</h1>

<style>
.emboss {
    font-size: 50px;
    color: #ddd;
    text-shadow: 
        2px 2px 2px #fff,
        -2px -2px 2px #999;
}
</style>

Perfect for soft UI designs.

3. What Is box-shadow?

box-shadow applies shadow around divs, cards, buttons, and containers.

Syntax

box-shadow: offset-x offset-y blur spread color;

4. Box Shadow Examples

4.1 Simple Card Shadow

<div class="card">Simple Shadow</div>

<style>
.card {
    width: 200px;
    padding: 20px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
</style>

This looks like a standard floating card.

4.2 Soft Floating Shadow (Material UI Style)

<div class="soft-card">Soft Shadow</div>

<style>
.soft-card {
    width: 240px;
    padding: 25px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 
        0 8px 15px rgba(0,0,0,0.1),
        0 20px 40px rgba(0,0,0,0.05);
}
</style>

Used widely in:
1. Dashboards
2.E-commerce cards
3. Admin panels

4.3 Neon Glow Box

<div class="glow-box">Neon Card</div>

<style>
.glow-box {
    padding: 30px;
    width: 200px;
    text-align: center;
    background: #000;
    color: #0ff;
    box-shadow: 0 0 20px #0ff, 0 0 40px #0ff;
}
</style>

Looks amazing on dark backgrounds!

4.4 Inset Shadows (Inner Shadow)

<div class="inset-box">Inset Shadow</div>

<style>
.inset-box {
    width: 200px;
    padding: 20px;
    background: #eee;
    box-shadow: inset 5px 5px 10px #ccc, inset -5px -5px 10px white;
}
</style>

Creates a pressed or sunken look.

Used in neumorphism designs.

4.5 3D Button Shadow

<button class="btn3d">Click Me</button>

<style>
.btn3d {
    padding: 15px 25px;
    font-size: 20px;
    background: #3498db;
    color: white;
    border: none;
    box-shadow: 0 4px 0 #1f6fa6;
}
.btn3d:active {
    box-shadow: 0 2px 0 #1f6fa6;
    transform: translateY(2px);
}
</style>

5. Shadow Tricks Used by UI/UX Designers

Multiple Shadows for Layering

box-shadow:
  1px 1px 3px rgba(0,0,0,0.1),
  4px 4px 8px rgba(0,0,0,0.15);

Colored Shadows

text-shadow: 0 0 10px rgb(255, 0, 100);

Soft UI (Neumorphism)

Requires both light and dark inset shadows.

Hover Shadows

.card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

Conclusion

CSS shadows are powerful, lightweight, and visually impressive. With text-shadow and box-shadow, you can create:

1. 3D text
2. Floating cards
3. Neon glow effects
4. Soft UI interfaces
5.Raised and inset buttons

Membership not found