CSS — Masking

Masks choose visibility

A mask uses an image (or gradient) as a transparency stencil: where the mask is opaque, the element shows; where transparent, hidden.

.fade-photo {
    -webkit-mask-image: linear-gradient(black, transparent);
    mask-image: linear-gradient(black, transparent);
}

(Photo's bottom edge dissolves into nothing — no editing software involved.)

Black/white or alpha both work: opaque areas = visible, transparent = hidden, gray = partially visible.

Gradient fade recipes

/* fade left edge only */
.edge-fade {
    mask-image: linear-gradient(to right, transparent, black 15%);
}

/* horizontal film-strip fade both sides */
.strip {
    mask-image: linear-gradient(to right,
        transparent, black 10%, black 90%, transparent);
}

(Carousel edges dissolve — the polished scroller look.)

Image masks — shapes from files

// any PNG's alpha channel becomes the shape
.torn-edge {
    mask-image: url("torn-paper-alpha.png");
    mask-size: cover;
}

Logos-in-text:

.text-through-photo {
    background-image: url("sunset.jpg");
    -webkit-mask-image: url("word-shape.png");
    mask-size: contain;
    mask-repeat: no-repeat;
}

SVG masks for crisp shapes

Inline SVG data-URI as the stencil:

.circle-reveal {
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="45%"/></svg>');
    mask-size: 100% 100%;
}

Animating reveals

Masks are animatable → scroll-style wipe effects:

.reveal {
    mask-image: linear-gradient(120deg, black 40%, transparent 40%);
    transition: -webkit-mask-position .8s ease, mask-position .8s ease;
    mask-size: 250% 100%;
    mask-position: 100% 0;      /* start fully transparent */
}
.reveal:hover {
    mask-position: 0 0;         /* sweep to fully visible */
}

(Hover sweeps a diagonal reveal across the element.)

mask vs clip-path

	clip-path	mask-image
Shape source	geometric functions (circle(), polygon())	images/gradients
Gradients/fades	no	yes
Partial transparency	hard edges only	full alpha range

/* clip-path sibling: geometric cutouts */
.hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }

Rule of thumb: shapes → clip-path · soft fades/photo stencils → mask.

Browser notes

1. -webkit-mask-* prefixes were required for years — include them alongside standard properties
2. Masks create stacking contexts like opacity does
3. Masked-away regions don't receive clicks — genuinely removed visually

Mini Practice

1. Bottom-fade hero image into page background.
2. Both-sides fading carousel strip.
3. Photo-filled headline via mask + background trick.
4. Hover sweep reveal using animated mask-position.
5. Hexagon avatars via clip-path; compare vs masking approach.

Next: text effects →