CSS gradient-generator
Bygg en gradient visuelt og kopier CSS-en.
- Kjører i nettleseren din — teksten din sendes aldri noe sted
- Ingen registrering, ingen kvoter, gratis å bruke så ofte du vil
Slik fungerer det
Gradienter skrives i CSS som én enkelt deklarasjon med en syntaks som er lett å huske feil, særlig vinkelkonvensjonen og hvor fargestoppene skal stå. Å se resultatet mens du justerer er raskere enn å laste siden på nytt for å sjekke.
Vinkelkonvensjonen lurer folk
I CSS peker 0 grader oppover og vinkelen øker med klokken, så 90 grader går fra venstre til høyre og 180 grader går fra topp til bunn. Dette er annerledes enn den matematiske konvensjonen og enn flere designverktøy, og derfor kommer en gradient som er kopiert fra et annet sted, ofte ut rotert.
De tre typene
Lineær går langs en rett linje og dekker nesten alle reelle bruksområder. Radial brer seg utover fra et punkt, noe som passer til glød og spotlights. Conic sveiper rundt et senter og er det sektordiagrammer og fargehjul er bygget av.
En gradient er et bilde, ikke en farge
Dette er det andre som lurer folk. CSS behandler en gradient som et bakgrunnsbilde, så den fungerer i background og background-image, men ikke i color, border-color eller noe annet som forventer en ren farge. Tekstgradienter trenger background-clip, som er en egen teknikk.
Legge til en mellomfarge
To stopp gir en ren overgang. Et tredje lar deg lede overgangen gjennom en annen fargetone, noe som unngår den grumsete grå fargen som oppstår når to motsatte farger blandes direkte.
CSS gradient-generator – spørsmål
Hvilken vei går vinkelen?
0 grader peker opp og vinklene øker med klokken, så 90 grader går fra venstre til høyre.
Hvorfor fungerer ikke gradienten min på tekst?
En gradient er et bakgrunnsbilde, ikke en farge. Tekstgradienter trenger background-clip som et eget trinn.
Når bør jeg bruke radial eller conic?
Radial for glød og spotlights, conic for sektordiagram- og fargehjuleffekter. Lineær dekker de fleste andre tilfeller.