Shadow Effects

Code

/* Basic shadow */
.shadow {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Multi-layer shadow */
.deep-shadow {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.07),
        0 2px 4px rgba(0, 0, 0, 0.07),
        0 4px 8px rgba(0, 0, 0, 0.07),
        0 8px 16px rgba(0, 0, 0, 0.07);
}

/* Inset shadow */
.inner-shadow {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

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

/* Neon effect */
.neon {
    text-shadow:
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #0ff,
        0 0 40px #0ff;
    color: #fff;
}

/* Floating effect */
.card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s, transform 0.3s;
}
.card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
}

/* filter drop-shadow (follows shape) */
.cutout {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* Long shadow */
.long-shadow {
    text-shadow:
        1px 1px #ccc, 2px 2px #ccc, 3px 3px #ccc,
        4px 4px #ccc, 5px 5px #ccc, 6px 6px #ccc;
}

Explanation

box-shadow adds box shadows; text-shadow adds text shadows; drop-shadow follows the element shape.

More CSS Snippets