CSS-gradientgenerator

Denne CSS-gradientgeneratoren bygger lineære og radielle gradienter fra fargestopper du kontrollerer, med en direkte forhåndsvisning og en bakgrunnserklæring som er klar til å lime inn. Dra stoppene langs linjen, angi vinkelen eller formen, og CSS-en oppdateres umiddelbart.

Alt kjører i nettleseren din fra fargene og innstillingene du velger, så ingenting blir lastet opp og du kan kopiere resultatet og bruke det offline.

En lineær gradient blander farger langs en rett linje, og vinkelen setter retningen: 0 grader peker opp, 90 grader peker mot høyre, 180 grader peker ned. En radiell gradient blander seg utover fra sentrum, som en sirkel eller en ellipse.

Begge er standard CSS-verdier, skrevet som linear-gradient() og radial-gradient(), og begge bruker den samme listen over fargestopp, så å bytte type beholder fargene dine og endrer bare hvordan de sprer seg.

Hvert fargestopp er en farge plassert i en posisjon fra 0 % til 100 %. Gradienten blander seg jevnt mellom nabostoppene, så en stoppers posisjon styrer hvor fargen topper seg og hvor raskt den toner inn i neste.

Legg til så mange stopp du trenger for å bygge flerfargegradienter, dra dem for å finjustere blandingen, eller klikk på linjen for å slippe et nytt stopp der du vil ha det. To stopp er minimum en gradient trenger.

Kopier den genererte koden og lim den inn som bakgrunn for et element, for eksempel en seksjon, et kort eller en knapp. Moderne nettlesere støtter lineær gradient og radial gradient uten leverandørprefiks, så verdien fungerer som den er.

Fordi en gradient bare er en verdi, kan du også bruke den hvor som helst hvor et bakgrunnsbilde forventes, legge det over en solid farge som en reserve, eller gjenbruke de samme stoppene over en lineær og radiell versjon for et konsistent utseende.