CSS-gradientgenerator: skriv selv eller bruk verktøy

En CSS-gradientgenerator gir deg en gradientverdi du kan lime inn, som linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%), etter at du velger farger og vinkel. Det er et godt utgangspunkt. Men en CSS-gradient er kort nok til å skrive selv på under ett minutt, og i håndskrevet kode ligger forbedringene: et tredje stopp, et bedre fargerom, et ekstra lag. Denne siden viser hvordan du leser, rydder og skriver koden selv.

De fire delene i enhver CSS-gradient

.hero {
  background-image: linear-gradient(
    160deg            /* 1. direction: an angle or "to right" */
    in oklch,         /* 2. optional: the colour space to blend in */
    #1e1b4b 0%,       /* 3. colour stops: colour and position */
    #6d28d9 55%,
    #f472b6 100%
  );
}

/* 4. the type: linear, radial or conic */
.glow { background-image: radial-gradient(circle at 80% 20%, #f472b6, #1e1b4b 70%); }
.dial { background-image: conic-gradient(from 90deg, #6d28d9, #f472b6, #6d28d9); }

Hver type har sin guide: lineære gradienter, radiale gradienter og koniske gradienter.

Gradientoppskrifter du kan kopiere

Disse er skrevet for hånd fremfor generert. Hver bruker en idé en enkel generator sjelden tilbyr: lys utenfor midten, tre stopp i stedet for to eller et valgt fargerom. Klikk på en for å kopiere.

Slik rydder du koden fra en generator

Limer du inn fra en eldre generator, kan du få fem linjer der én holder. Gradienter med prefiks og Internet Explorer-filteret har vært unødvendige i årevis. De tilfører kodevekt, og den gamle -webkit--syntaksen bruker et annet vinkelsystem som forvirrer den som redigerer senere.

.hero {
  background-color: #1e1b4b; /* shows while loading and if the gradient fails */
  background-image: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

Nettleseren er også en brukbar generator. Åpne utviklerverktøyene, velg elementet og klikk på en fargeprøve i gradienten i Styles-panelet. Du får en fargevelger for stoppet og kan endre vinkler og prosentandeler direkte mens siden oppdateres. Kopier den ferdige verdien tilbake til stilarket. For å tilpasse gradienten til ekte innhold slår dette et frittstående verktøy, fordi du ser den bak den faktiske overskriften.

Fem endringer som slår en glidebryter

1. 1

   Legg til et midtstopp

   To stopp gir en rett overgang. En tredje farge rundt 50 til 60 prosent tilfører dybde og lar deg styre hvor endringen skjer.

2. 2

   Velg fargerom

   Legg til in oklab for å holde blandinger mellom fjerne farger rene, eller in oklch for å la fargetonen bevege seg. Gradientinterpolasjon viser forskjellen.

3. 3

   Flytt lyset utenfor midten

   Bytt en lineær gradient med radial-gradient(circle at 80% 20%, ...), så den lyseste fargen kommer fra et hjørne som en lyskilde.

4. 4

   Legg to eller tre gradienter i lag

   Skill flere verdier med komma i background-image. Radiale lys over en lineær base virker langt fyldigere enn én gradient. CSS-meshgradienter tar dette videre.

5. 5

   Legg til litt korn

   Et svakt støylag skjuler fargebånd på store, mørke gradienter. Koden står i CSS-støytekstur.

.hero {
  background-color: #0f0b1e;
  background-image:
    radial-gradient(circle at 80% 15%, #f472b6 0%, transparent 40%),
    radial-gradient(circle at 15% 85%, #4338ca 0%, transparent 45%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}

Gjør en gradient til et gjenbrukbart token

Når gradienten er riktig, gi den et navn. En egendefinert egenskap holder hele verdien, så knapper, bannere og toppfelt kan dele den, og en omdesigning endrer én linje. CSS-variabler til temaer viser hvordan du bytter gradienttokens per merkevare eller modus.

:root {
  --gradient-brand: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

.hero { background-image: var(--gradient-brand); }
.badge { background-image: var(--gradient-brand); }

Når en generator ikke er riktig verktøy

Generatorer og håndskrevet CSS har samme begrensning: resultatet er en stoppliste alle kan lese i stilarket og gjenbruke. Det er greit til grensesnittdetaljer. For bakgrunnen folk kjenner deg igjen på, på nettsiden og hvert innlegg, ønsker du kanskje noe fyldigere og vanskeligere å kopiere. Bredere råd finnes i slik bruker du en gradientgenerator.

Marks fra Gradiently går utover det CSS kan beskrive: materialer i lag, lys, korn og bevegelse, rendret direkte i hver størrelse, med nøyaktig én eier om gangen. Du kan designe gratis med enhver usikret Mark og søke i Markedet med fargeord for å finne en nær gradienten du forsøkte å skrive.