CSS gradient generator: skriv gradienter i hånden eller med værktøjer

En CSS gradient generator giver dig en gradientværdi at indsætte, som linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%), når du har valgt farver og en vinkel. Det er et fint udgangspunkt. Men en CSS-gradient er kort nok til at skrive i hånden på under et minut, og i håndskrevet kode ligger forbedringerne: et tredje stop, et bedre farverum, et andet lag. Denne side viser, hvordan du læser en generators kode, renser den og skriver din egen.

De fire dele af hver 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 egen guide: lineære gradienter, radiale gradienter og koniske gradienter.

Gradientopskrifter at kopiere

De er skrevet i hånden frem for genereret, og hver bruger én idé, en grundlæggende generator sjældent giver dig: et lys uden for midten, tre stop i stedet for to eller et valgt farverum. Klik på en for at kopiere den.

Sådan renser du genereret kode

Indsæt fra en ældre generator, og du kan få fem linjer, hvor én er nok. Præfikserede gradienter og Internet Explorer-filteret har været unødvendige i årevis. De øger vægten og bruger, i tilfældet med den gamle -webkit--syntaks, et andet vinkelsystem, der forvirrer enhver, der 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%);
}

Din browser er også en habil generator. Åbn udviklerværktøjerne, vælg elementet, og klik på en farveprøve inde i gradienten i panelet Styles: du får en farvevælger til det stop, og du kan redigere vinkler og procenter på stedet, mens siden opdateres live. Kopiér den færdige værdi tilbage i dit stylesheet. Til at finjustere en gradient mod rigtigt indhold slår det ethvert selvstændigt værktøj, fordi du ser den bag din egentlige overskrift.

Fem rettelser, der slår enhver skyder

1. 1

   Tilføj et midterste stop

   To stop giver en lige rampe. En tredje farve ved omkring 50 til 60 procent tilføjer dybde og lader dig styre, hvor skiftet sker.

2. 2

   Vælg farverummet

   Tilføj in oklab for at holde blandinger mellem fjerne farver rene, eller in oklch for at lade farvetonen rejse. Gradientinterpolation viser forskellen.

3. 3

   Flyt lyset væk fra midten

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

4. 4

   Læg to eller tre gradienter i lag

   Adskil flere værdier med komma i background-image. Radiale glød over en lineær bund ser langt rigere ud end én gradient. CSS mesh-gradienter tager det videre.

5. 5

   Tilføj lidt korn

   Et svagt støjlag skjuler banding på store, mørke gradienter. Koden står i CSS-støjtekstur.

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

Gør en gradient til et genbrugeligt token

Når en gradient er rigtig, så giv den et navn. En custom property rummer hele værdien, så knapper, bannere og hero-sektionen kan dele den, og et redesign rører én linje. CSS-variabler til temaer viser, hvordan du bytter gradienttokens pr. brand eller tilstand.

: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 det rette værktøj

Generatorer og håndskrevet CSS deler den samme grænse: resultatet er en liste af stop, som enhver kan læse i dit stylesheet og genbruge. Det er fint til detaljer i brugerfladen. Til den baggrund, folk genkender dig på, på dit site og i hvert opslag, vil du måske have noget rigere og sværere at kopiere. Det bredere råd står i sådan bruger du en gradient generator.

Marks fra Gradiently går ud over, hvad CSS kan beskrive: stablede materialer, lys, korn og bevægelse, gengivet live i hver størrelse, med præcis én ejer ad gangen. Du kan designe med en hvilken som helst ikke-sikret Mark gratis og søge i Markedet på farveord for at finde en tæt på den gradient, du forsøgte at skrive.