Gjennomsiktige gradienter i CSS: uttoning, overlegg og scrim

For å gjøre en CSS-gradient gjennomsiktig gir du ett av stoppene en farge med null alfa: linear-gradient(to bottom, #7c3aed, transparent) toner fiolett ut til ingenting, så det som ligger under, skinner gjennom. Samme idé bruker du til uttoning på slutten av en tekst, mørke scrim bak bildetekster og fargede overlegg på bilder. Vil du tone ut innholdet i et element i stedet for bakgrunnen, bruker du mask-image med en gradient.

Måter å skrive en gjennomsiktig farge på

Hvorfor uttoninger pleide å bli grå

Nøkkelordet transparent er svart med null alfa. Tidlige nettlesere blandet rød, grønn og blå kanal hver for seg og alfakanalen for seg, så en uttoning fra hvit til transparent gikk innom halvgjennomsiktig grått på veien. Derfor insisterer eldre veiledninger på rgba(255, 255, 255, 0) i stedet.

Spesifikasjonen krever nå forhåndsmultiplisert alfa: hver farge vektes etter opasiteten sin før blandingen, så et helt gjennomsiktig stopp bidrar ikke med farge i det hele tatt. Alle dagens nettlesere gjør dette. Å skrive samme farge med null alfa er likevel en harmløs vane, og den holder deg trygg i e-postklienter og gamle WebViews.

Hvor uttoningen slutter, betyr like mye som fargene. Et stopp på 70 prosent avslutter uttoningen tidlig og lar resten av boksen være helt klar, som er ideelt for et fargeskjær som bare skal berøre én kant. To stopp på samme posisjon gir et skarpt kutt fra farge til ingenting, nyttig for halvfulle linjer og delte bakgrunner. Stopposisjoner forklares i lineære gradienter i CSS.

Tone ut innhold med mask-image

En bakgrunnsgradient ligger bak innholdet, så den kan ikke tone ut tekst, bilder eller en rullende liste. Det kan en maske. Med mask-image holder de ugjennomsiktige delene av gradienten elementet synlig, mens de gjennomsiktige delene skjuler det. Fargen på masken spiller ingen rolle, bare alfaen.

/* 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%);
}

Det gamle alternativet var en hvit gradient lagt over innholdet. Den ryker i det øyeblikket siden ikke er hvit, for eksempel i mørk modus, og den blokkerer klikk med mindre du husker pointer-events: none. En maske har ingen av disse problemene.

Scrim: gjennomsiktige gradienter for tekst

En scrim gjør en del av et bilde mørkere så teksten på det blir lesbar, og toner ut til helt gjennomsiktig så resten av bildet forblir lyst. En uttoning med to stopp fungerer, men den rette rampen etterlater en synlig linje der mørkningen slutter. Flere stopp, fordelt så de myknes ut, skjuler den kanten.

.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;
}

Farg scrimen med en dyp versjon av bildets egen farge i stedet for rent svart, så føles den som en del av bildet. På et varmt solnedgangsbilde synker en dyp brun som rgb(41 20 8 / 0.75) inn i bildet, der svart ville sett ut som et filter lagt oppå. Gradientoverlegg i CSS handler om fargeskjær og blandingsmoduser, og tekst over bilder handler om plassering.

Gjennomsiktige hull og spotlys

Snu ideen: gjennomsiktig i midten, mørkt utenfor. En radiell gradient lagt over en side eller et bilde lar ett område være opplyst og demper stille alt annet, som passer til introduksjonstips, produktnærbilder og presentasjoner.

.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
  );
}

Til innlegg i sosiale medier og trykk trenger du sjelden å bygge scrim for hånd. I Gradiently lager Marken selv plass til ordene dine ved å gjøre fargene dypere eller lysere nær bokstavene, uten noe overleggslag du må justere for hver størrelse.