Transparante verlopen in CSS: fades, overlays en scrims

Om een CSS-verloop transparant te maken, geef je een van zijn stops een kleur met alfa nul: linear-gradient(to bottom, #7c3aed, transparent) laat violet tot niets vervagen, zodat wat eronder zit doorschijnt. Gebruik hetzelfde idee voor fades aan het einde van tekst, donkere scrims achter bijschriften en gekleurde overlays op foto’s. Om de inhoud van een element te laten vervagen in plaats van de achtergrond gebruik je in plaats daarvan mask-image met een verloop.

Manieren om een transparante kleur te schrijven

Waarom fades vroeger grijs werden

Het sleutelwoord transparent is zwart met alfa nul. Vroege browsers mengden de rood-, groen- en blauwkanalen en het alfakanaal apart, dus een fade van wit naar transparent ging onderweg door half transparant grijs. Daarom staan oudere tutorials op rgba(255, 255, 255, 0).

De specificatie eist nu voorvermenigvuldigde alfa: elke kleur wordt vóór het mengen gewogen met zijn dekking, dus een volledig transparante stop draagt helemaal geen kleur bij. Elke huidige browser doet dit. De bijpassende kleur met alfa nul schrijven blijft een onschuldige gewoonte, en houdt je veilig in e-mailclients en oude WebViews.

Waar de fade eindigt telt even zwaar als de kleuren. Een stop op 70 procent maakt de fade vroeg af en laat de rest van de box volledig helder, ideaal voor een tint die maar één rand moet raken. Twee stops op dezelfde positie geven een harde overgang van kleur naar niets, handig voor half gevulde balken en gesplitste achtergronden. Stopposities worden uitgelegd in CSS lineaire verlopen.

Inhoud laten vervagen met mask-image

Een achtergrondverloop ligt achter de inhoud, dus kan het geen tekst, afbeeldingen of een scrollende lijst laten vervagen. Een masker wel. Met mask-image houden ondoorzichtige delen van het verloop het element zichtbaar en verbergen transparante delen het. De kleur van het masker doet er niet toe, alleen de alfa.

/* Fade the last lines of a teaser paragraph */
.teaser {
  max-height: 9rem;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

/* Soft edges on a horizontally scrolling row */
.carousel {
  overflow-x: auto;
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

/* Fade a photo into the page on any background colour */
.hero-photo {
  mask-image: linear-gradient(to bottom, #000 50%, transparent 95%);
}

Het oude alternatief was een wit verloop over de inhoud. Dat breekt zodra de pagina niet wit is, bijvoorbeeld in de donkere modus, en blokkeert klikken tenzij je pointer-events: none onthoudt. Een masker heeft geen van beide problemen.

Scrims: transparante verlopen voor tekst

Een scrim verdonkert een deel van een afbeelding zodat tekst erop leest, en vervaagt naar volledig transparant zodat de rest van de foto helder blijft. Een fade met twee stops werkt, maar zijn rechte helling laat een zichtbare lijn waar de verdonkering eindigt. Meer stops, verdeeld om af te vlakken, verbergen die rand.

.card {
  background-image:
    linear-gradient(to top,
      rgb(2 6 23 / 0.8) 0%, rgb(2 6 23 / 0.62) 15%, rgb(2 6 23 / 0.42) 30%,
      rgb(2 6 23 / 0.24) 48%, rgb(2 6 23 / 0.1) 66%, rgb(2 6 23 / 0.03) 82%,
      rgb(2 6 23 / 0) 100%),
    url("/images/coast.jpg");
  background-size: cover;
  color: #f8fafc;
}

Tint de scrim met een diepe versie van de kleur van de foto in plaats van puur zwart en hij voelt als deel van het beeld. Op een warme zonsondergangfoto zakt een diep bruin zoals rgb(41 20 8 / 0.75) in de afbeelding weg, waar zwart eruitziet als een filter erbovenop. Verloopoverlays in CSS behandelt kleurwassingen en blendmodi, en tekst over afbeeldingen behandelt plaatsing.

Transparante gaten en spotlights

Draai het idee om: transparant in het midden, donker daarbuiten. Een radiaal verloop over een pagina of afbeelding laat één gebied verlicht en dimt al het andere stilletjes, wat past bij onboardingtips, productdetails en dia’s.

.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 40%),
    transparent 0 140px,
    rgb(2 6 23 / 0.72) 220px
  );
}

Voor socialposts en drukwerk hoef je zelden scrims met de hand te bouwen. In Gradiently maakt de Mark zelf ruimte voor je woorden, door de kleuren bij de letters te verdiepen of te verlichten, zonder overlaylaag om per formaat af te stemmen.