CSS-funktionen konisk-gradient()

Definition och användning

CSS konisk-gradient() Funktionen sätter konisk gradient som bakgrundsbild.

Konisk gradient är en färgövergång som roterar runt en mittpunkt (likt en tårta och en färgcirkel).

För att skapa en konisk gradient måste du definiera minst två färgstopp.

Exempel på konisk gradient:

Exempel

Exempel 1

Det finns tre färger i konisk gradient:

#grad {
  background-image: konisk gradient(röd, gult, grönt);
}

Prova själv

Exempel 2

Det finns fem färger i konisk gradient:

#grad {
  background-image: konisk gradient(röd, gult, grönt, blått, svart);
}

Prova själv

Exempel 3

Det finns tre färger och varje färg har ett specifikt vinkelvärde för konisk gradient:

#grad {
  background-image: konisk gradient(röd 45 grader, gult 90 grader, grönt 210 grader);
}

Prova själv

Exempel 4

Genom att lägga till border-radius: 50% ser konisk gradient ut som en tårta:

#grad {
  background-image: konisk gradient(röd, gult, grönt, blått, svart);
  border-radius: 50%;
}

Prova själv

Exempel 5

Konisk gradient med startvinkel:

#grad {
  background-image: conic-gradient(from 90deg, red, yellow, green);
  border-radius: 50%;
}

Prova själv

Exempel 6

Konisk gradient med centrposition:

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

Prova själv

Exempel 7

Samtidigt med startvinkel och centrpositionens konisk gradient:

#grad {
  background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

Prova själv

Exempel 8

En annan cirkeltillämpningsexempel:

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
  border-radius: 50%;
}

Prova själv

CSS syntax

background-image: conic-gradient([from vinkel] position,] färgvinkel, färgvinkel, ...);

Tekniska detaljer

Webbläsarstöd

Tal i tabellen representerar den första webbläsarens version som helt stöder denna funktion.

Relaterade sidor

Lär dig:CSS tonfärgövergång

Referens:CSS background-image egenskap

Referens:CSS linear-gradient() funktion

Referens:CSS radial-gradient() funktion

Referens:CSS upprepeting-conic-gradient() funktion

Referens:CSS upprepeting-linear-gradient() funktion

Referens:Referens: CSS repeating-radial-gradient() funktion