CSS-gradientgenerator
Byg en gradient visuelt og kopiér CSS'en.
- Kører i din browser — din tekst sendes aldrig nogen steder hen
- Ingen tilmelding, ingen kvoter, gratis at bruge så ofte, du vil
Sådan fungerer det
Gradienter skrives i CSS som én enkelt deklaration, hvis syntaks er let at huske forkert, især vinkelkonventionen og placeringen af farvestoppene. At se resultatet, mens man justerer, er hurtigere end at genindlæse en side for at tjekke.
Vinkelkonventionen overrasker folk
I CSS peger 0 grader opad, og vinklen vokser med uret, så 90 grader går fra venstre mod højre og 180 grader fra top til bund. Det adskiller sig fra den matematiske konvention og fra flere designværktøjer, og det er derfor, en gradient kopieret et andet sted fra ofte kommer ud roteret.
De tre typer
Lineær løber langs en ret linje og dækker næsten alle reelle anvendelser. Radial spreder sig udad fra et punkt, hvilket passer til glød og projektørlys. Konisk sveiper rundt om et centrum og er det, lagkagediagrammer og farvehjul bygges af.
En gradient er et billede, ikke en farve
Det er det andet, der snubler folk. CSS behandler en gradient som et baggrundsbillede, så den virker i background og background-image, men ikke i color, border-color eller andet, der forventer en almindelig farve. Tekstgradienter kræver background-clip, som er en separat teknik.
Tilføjelse af en mellemfarve
To stop giver en ren overgang. Et tredje lader dig føre overgangen gennem en anden farvetone, hvilket undgår den mudrede grå, der opstår, når to modsatte farver blandes direkte.
CSS-gradientgenerator – spørgsmål
Hvilken vej går vinklen?
0 grader peger opad, og vinklerne vokser med uret, så 90 grader går fra venstre mod højre.
Hvorfor virker min gradient ikke på tekst?
En gradient er et baggrundsbillede, ikke en farve. Tekstgradienter kræver background-clip som et separat trin.
Hvornår skal jeg bruge radial eller konisk?
Radial til glød og projektørlys, konisk til lagkage- og farvehjulseffekter. Lineær dækker de fleste andre tilfælde.