CSS-gradientgenerator
Opret lineære og radiale CSS-gradienter med live forhåndsvisning, og kopiér den færdige baggrundskode.
Relaterede værktøjer
Sådan bruger du CSS-gradient
- 01
Vælg en lineær eller radial gradient.
- 02
Tilføj farvestop, og indstil farven og placeringen for hvert stop.
- 03
Indstil vinklen med skyderen for en lineær gradient.
- 04
Kopiér CSS-koden, og indsæt den i dit stylesheet.
Hvad denne generator gør
Generatoren opretter lineære og radiale CSS-gradienter fra de farvestop, du styrer. Du får en live forhåndsvisning og en background-erklæring, der er klar til at indsætte. Flyt stoppene langs bjælken, indstil vinklen eller formen, og se CSS-koden blive opdateret med det samme.
Alt kører i din browser. Farver og indstillinger uploades ikke, og resultatet kan kopieres og bruges offline.
Lineære og radiale gradienter
En lineær gradient blander farver langs en lige linje, og vinklen bestemmer sin retning: 0 grader peger op, 90 grader peger mod højre, 180 grader peger ned. En radial gradient blander sig udad fra midten, som en cirkel eller en ellipse.
Begge er standard CSS-værdier, skrevet som linear-gradient() og radial-gradient(), og begge bruger den samme liste over farvestop, så skift af type beholder dine farver og ændrer kun, hvordan de spredes.
Arbejde med farvestop
Hvert farvestop er en farve placeret i en position fra 0 % til 100 %. Gradienten blander jævnt mellem tilstødende stop, så et stops position styrer, hvor dets farve topper, og hvor hurtigt det falmer ind i det næste.
Tilføj så mange stop, som du har brug for, for at bygge flerfarvede gradienter, træk dem for at finjustere blandingen, eller klik på bjælken for at slippe et nyt stop, hvor du vil have det. To stop er det minimum, en gradient behøver.
Brug af CSS i dit projekt
Kopier den genererede kode og indsæt den som baggrund for ethvert element, såsom et afsnit, et kort eller en knap. Moderne browsere understøtter lineær gradient og radial gradient uden et leverandørpræfiks, så værdien fungerer som den er.
Fordi en gradient kun er en værdi, kan du også bruge den overalt, hvor et baggrundsbillede forventes, lægge det over en ensfarvet som en reserve, eller genbruge de samme stop på tværs af en lineær og radial version for et ensartet udseende.
Ofte stillede spørgsmål
Hvad er forskellen mellem en lineær og radial gradient?
En lineær gradient blander farver langs en lige linje i den valgte vinkel. En radial gradient blander farver fra midten og ud som en cirkel eller ellipse. Begge bruger den samme liste af farvestop.
Hvordan virker farvestop?
Hvert stop er en farve placeret i en position fra 0 % til 100 %. Gradienten blander jævnt mellem tilstødende stop, så flytning af et stop ændrer, hvor dets farve topper.
Hvordan bruger jeg den genererede CSS?
Kopier koden og indsæt den som baggrundsegenskaben for ethvert element, for eksempel en div eller en knap. Det fungerer i enhver moderne browser uden et præfiks.
Kan jeg tilføje mere end to farver?
Ja. Brug Tilføj stop for at indsætte så mange farver, som du vil, og indstil derefter hver enkelts position for at kontrollere blandingen.
Er der uploadet noget?
Nej. Gradienten bygges udelukkende i din browser ud fra de farver og indstillinger, du vælger, og intet sendes til en server.