Kort fortalt
- En konisk gradient skifter farve, mens den roterer om et midtpunkt, så dens stop er vinkler og ikke afstande.
- Koniske gradienter er den naturlige måde at tegne farvehjul, lagkage- og donutdiagrammer, metallisk glans og lysstråler på.
- Designværktøjer kalder ofte det samme en vinkelgradient.
- Hver konisk gradient har et skarpt punkt i midten og en søm, hvor cirklen lukker sig, så begge skal håndteres.
- En konisk gradient med hårde stop bliver til et diagram, og med bløde stop bliver den til en flade, der ser ud til at fange lys.
På denne side
En konisk gradient skifter farve, mens den fejer rundt om et midtpunkt, som viseren på et ur bevæger sig rundt om skiven. En lineær gradient skifter langs en linje, og en radial gradient skifter, mens den bevæger sig udad, men en konisk gradient skifter med vinklen. Kigger du lige ned på en kegle malet i bånd, ser du det samme, og det er derfra, navnet kommer. Figma og nogle andre værktøjer kalder den en vinkelgradient.
Den vinkelbaserede opførsel gør koniske gradienter gode til det, andre gradienter ikke kan: farvehjul, lagkagediagrammer, børstet metal, stjernesprængninger og lysstråler. Denne guide gennemgår hver med levende eksempler. Hele CSS-syntaksen står i CSS conic-gradient().
Sådan virker en konisk gradient
Du angiver et centrum, en startvinkel og en liste af farver med vinkler eller procenter. Nul grader peger opad, og fejningen går med uret. Hvor én farve slutter, og den næste begynder, er et stop, præcis som i andre gradienter, bortset fra at 25 % betyder en kvart omdrejning og ikke en fjerdedel af bredden.
conic-gradient(from 0deg at 50% 50%, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444)Den gentagelse af den første farve til sidst er vigtig. Er det sidste stop forskelligt fra det første, får du en hård linje lige op fra midten, hvor fejningen møder sin egen begyndelse. Guiden til farvehjulet forklarer, hvordan du læser farvetonerne på et hjul som dette.
Eksempler på koniske gradienter til design
Lagkage- og donutdiagrammer
Giv hver farve en start- og slutvinkel, og gradienten bliver et lagkagediagram uden billede og uden diagrambibliotek. Tilføj en cirkulær maske, og det bliver en donut. Det passer til enkle, dekorative data i opslag og slides. Til rigtig rapportering skal du tilføje labels, for et diagram, der kun bygger på farve, svigter folk, der ser farver anderledes.
.donut {
width: 160px;
aspect-ratio: 1;
border-radius: 50%;
/* 45%, 30% and 25% of the circle */
background: conic-gradient(#7c3aed 0% 45%, #f472b6 45% 75%, #fcd34d 75% 100%);
/* cut out the middle */
mask: radial-gradient(circle, transparent 55%, #000 56%);
}Metal og glans
Børstet stål, en vinylplade og en satinknap reflekterer alle lys i kiler rundt om midten. Skiftende lyse og mørke grå toner rundt om en konisk gradient efterligner det. Brug fire til seks skift. Færre ligner en strandbold, flere ligner et diagram. Giv de grå toner et let varmt skær til guld eller messing og et let blåt til krom.
Stråler og sprængninger
Placér centrum over eller uden for billedet, og en smal, lys kile bliver til en spotlysstråle eller en lysstribe gennem et vindue. En gentagende konisk gradient med skiftende kiler bliver til en solstråleeffekt, retrougtrykket på udsalgsplakater. Hold sprængninger bag en stor, enkel overskrift. De er højlydte i sig selv.
Irisering
Ægte irisering skifter farvetone med betragtningsvinklen. En blød konisk fejning af pasteller med centrum flyttet til den ene side kommer overraskende tæt på. Den er grundlaget for de fleste holografiske gradienter.
Konisk, radial eller lineær
| Type | Farven skifter med | Bedst til |
|---|---|---|
| Lineær | Afstand langs en linje | Himmel, lys fra den ene side, enkle brandflader |
| Radial | Afstand fra et centrum | Spotlys, glød, vignetter |
| Konisk | Vinkel rundt om et centrum | Hjul, diagrammer, glans, stråler, sprængninger |
Er du i tvivl, så spørg, hvad lyset i dit billede gør. Lys, der falder hen over en flade, er lineært. Lys fra en kilde er radialt. Lys, der reflekteres fra noget, der drejer eller er buet, er konisk. Gradienttyper viser dem alle side om side.
Sådan får du koniske gradienter rigtige
- 1
Beslut, hvor centrum skal ligge
En centreret konisk gradient ligner et diagram eller et hjul. Flytter du centrum til et hjørne eller uden for billedet, bliver den til lys og glans.
- 2
Luk cirklen
Gentag den første farve til sidst, medmindre du vil have en synlig søm. Hårde sømme er kun til diagrammer og sprængninger.
- 3
Skjul eller blødgør punktet
Hver konisk gradient snører sig sammen til et skarpt punkt i midten. Læg et logo, en cirkel eller billedets kant over det, eller slør laget.
- 4
Brug en startvinkel
Ved at rotere starten med
fromflytter du den lyseste kile, og det er ofte alt, en komposition behøver. - 5
Kombinér med andre typer
En diskret konisk glans oven på en lineær eller radial base giver en fornemmelse af materiale uden at trække opmærksomhed til sig selv.
Undgå
- Et regnbuehjul som baggrund bag tekst
- Et skarpt midtpunkt, der ligger frit fremme
- En søm, hvor den sidste farve ikke matcher den første
- Diagrammer, hvor farve er den eneste måde at kende udsnit fra hinanden
Gør
- Korte, beslægtede farvebuer til flader
- Centrum skjult bag en genstand eller uden for lærredet
- Den første farve gentaget til sidst
- Labels eller mønstre sammen med diagramfarver
Koniske gradienter laver også mønstre: en gentagende version med fire hårde kvarte laver et skakternet mønster i én linje. CSS-mønstre gennemgår dem.
Spørgsmål, folk stiller
Hvad er en konisk gradient?
En konisk gradient skifter farve, mens den roterer om et midtpunkt, så dens farvestop sættes ved vinkel og ikke afstand.
Er en konisk gradient det samme som en vinkelgradient?
Ja. Figma og flere andre designværktøjer kalder den en vinkelgradient. CSS kalder den en konisk gradient.
Hvordan laver jeg et lagkagediagram med en konisk gradient?
Giv hver farve en start- og slutposition med hårde stop, for eksempel violet fra 0 % til 45 % og pink fra 45 % til 75 %. Tilføj labels, så diagrammet ikke afhænger af farve alene.
Hvorfor er der en linje øverst i min koniske gradient?
Fejningen starter og slutter ved den samme vinkel. Er den sidste farve forskellig fra den første, opstår der en søm dér. Gentag den første farve til sidst for at fjerne den.
Skrevet af Gradiently
Holdet bag Gradiently, et designværktøj bygget om Marks: levende gradienter, der får alt, du designer, til at ligne dig.
Se vores profil
