Gennemsigtige gradienter i CSS: fades, overlays og scrims

For at gøre en CSS-gradient gennemsigtig giver du ét af farvestoppene en farve med nul alfa: linear-gradient(to bottom, #7c3aed, transparent) toner violet ud til ingenting, så det, der ligger nedenunder, skinner igennem. Brug samme idé til fades for enden af tekst, mørke scrims bag billedtekster og farvede overlays på fotos. Skal du tone et elements indhold ud i stedet for dets baggrund, bruger du mask-image med en gradient.

Måder at skrive en gennemsigtig farve på

Hvorfor fades plejede at blive grå

Nøgleordet transparent er sort med nul alfa. Tidlige browsere blandede rød, grøn og blå kanal og alfakanalen hver for sig, så en fade fra hvid til transparent passerede halvgennemsigtig grå på vejen. Det er derfor, ældre tutorials insisterer på rgba(255, 255, 255, 0) i stedet.

Specifikationen kræver nu præmultipliceret alfa: hver farve vægtes efter sin dækkende evne, før den blandes, så et helt gennemsigtigt stop slet ikke bidrager med farve. Alle nuværende browsere gør det. At skrive den matchende farve med nul alfa er stadig en harmløs vane, og den holder dig på den sikre side i mailklienter og gamle WebViews.

Hvor fadet slutter, betyder lige så meget som farverne. Et stop ved 70 procent afslutter fadet tidligt og lader resten af boksen stå helt klar, hvilket er ideelt til en tone, der kun skal røre én kant. To stop på samme position giver et hårdt skift fra farve til ingenting, nyttigt til halvfyldte bjælker og delte baggrunde. Stoppositioner er forklaret i CSS linear gradienter.

Fade indhold ud med mask-image

En baggrundsgradient ligger bag indholdet, så den kan ikke tone tekst, billeder eller en rullende liste ud. En maske kan. Med mask-image holder gradientens dækkende dele elementet synligt, mens de gennemsigtige dele skjuler det. Maskens farve er ligegyldig, kun dens alfa tæller.

/* 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 alternativ var en hvid gradient lagt over indholdet. Den går i stykker, så snart siden ikke er hvid, for eksempel i mørk tilstand, og den blokerer klik, medmindre du husker pointer-events: none. En maske har ingen af de problemer.

Scrims: gennemsigtige gradienter til tekst

En scrim mørkner en del af et billede, så teksten på det kan læses, og toner ud til fuldt gennemsigtig, så resten af fotoet forbliver lyst. En fade med to stop virker, men dens lige rampe efterlader en synlig streg, hvor mørkningen ender. Flere stop, fordelt så de glider blødt ud, skjuler 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;
}

Tone scrimmen med en dyb version af fotoets farve frem for ren sort, så føles den som en del af billedet. På et varmt solnedgangsfoto synker en dyb brun som rgb(41 20 8 / 0.75) ind i billedet, hvor sort ville ligne et filter lagt oveni. Gradient-overlays i CSS dækker farvelag og blandingstilstande, og tekst over billeder dækker placering.

Gennemsigtige huller og spotlights

Vend idéen om: gennemsigtig i midten, mørk udenfor. En radial gradient lagt over en side eller et billede efterlader ét område oplyst og dæmper stille alt andet, hvilket passer til onboarding-tips, nærbilleder af produkter og slides.

.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 opslag på sociale medier og print har du sjældent brug for at bygge scrims i hånden. I Gradiently gør selve Marken plads til dine ord og uddyber eller løfter farverne nær bogstaverne, uden et overlaylag, du skal finjustere for hver størrelse.