Genomskinliga gradienter i CSS: gradienter, överlägg och scrims

För att göra en CSS-gradient genomskinlig ger du ett av dess stopp en färg med noll alfa: linear-gradient(to bottom, #7c3aed, transparent) tonar violett till ingenting, så att det som ligger under syns igenom. Samma idé fungerar för gradienter i slutet av text, mörka scrims bakom bildtexter och färgade överlägg på foton. Vill du tona ett elements innehåll i stället för dess bakgrund använder du mask-image med en gradient.

Sätt att skriva en genomskinlig färg

Varför gradienter förr blev grå

Nyckelordet transparent är svart med noll alfa. Tidiga webbläsare blandade kanalerna för rött, grönt och blått och alfakanalen var för sig, så en gradient från vitt till transparent passerade halvgenomskinligt grått på vägen. Därför insisterar äldre handledningar på rgba(255, 255, 255, 0) i stället.

Specifikationen kräver nu förmultiplicerad alfa: varje färg vägs med sin opacitet före blandningen, så ett helt genomskinligt stopp bidrar inte med någon färg alls. Alla aktuella webbläsare gör så. Att skriva den matchande färgen med noll alfa är fortfarande en ofarlig vana, och den håller dig trygg i e-postklienter och gamla WebViews.

Var gradienten slutar spelar lika stor roll som färgerna. Ett stopp vid 70 procent avslutar gradienten tidigt och lämnar resten av rutan helt klar, vilket är perfekt för en ton som bara ska röra en kant. Två stopp på samma position ger ett hårt snitt från färg till ingenting, användbart för halvfyllda staplar och delade bakgrunder. Stoppositioner förklaras i CSS linjära gradienter.

Tona innehåll med mask-image

En bakgrundsgradient ligger bakom innehållet, så den kan inte tona text, bilder eller en rullande lista. En mask kan. Med mask-image håller gradientens täckande delar elementet synligt medan de genomskinliga delarna döljer det. Maskens färg spelar ingen roll, bara dess 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%);
}

Det gamla alternativet var en vit gradient lagd över innehållet. Den går sönder så fort sidan inte är vit, till exempel i mörkt läge, och den blockerar klick om du inte kommer ihåg pointer-events: none. En mask har inget av problemen.

Scrims: genomskinliga gradienter för text

En scrim mörkar en del av en bild så att texten på den går att läsa, och tonar ut till helt genomskinlig så att resten av fotot förblir ljust. En tvåstoppsgradient fungerar, men dess raka ramp lämnar en synlig linje där mörkläggningen slutar. Fler stopp, utspridda så att de mjukas av, döljer 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;
}

Färga scrimen med en mörk variant av fotots färg i stället för rent svart så känns den som en del av bilden. På ett varmt solnedgångsfoto sjunker en mörk brun som rgb(41 20 8 / 0.75) in i bilden, medan svart skulle se ut som ett filter lagt ovanpå. Gradientöverlägg i CSS går igenom färggradienter och blandlägen, och text över bilder går igenom placering.

Genomskinliga hål och spotlights

Vänd på idén: genomskinligt i mitten, mörkt utanför. En radiell gradient lagd över en sida eller bild lämnar ett område upplyst och dämpar tyst allt annat, vilket passar introduktionstips, närbilder på produkter och bildspel.

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

För sociala inlägg och tryck behöver du sällan bygga scrims för hand. I Gradiently gör Marken själv plats för dina ord, fördjupar eller lyfter färgerna nära bokstäverna, utan något överläggslager att trimma för varje storlek.