CSS radial-gradient() function

Föregående sida CSS pow() funktion
Nästa sida CSS ray() funktion
Gå tillbaka till föregående nivå CSS funktion referenshandbok

Definition and usage

CSS radial-gradient() The function sets the radial gradient as the background image.

The radial gradient is defined by its center.

To create a radial gradient, you must define at least two color markers.

Radial gradient example:

Instance

Example 1

Radial gradient with evenly distributed color markers:

#grad {
  background-image: radial-gradient(red, green, blue);
}

Prova själv

Example 2

Radial gradient distribution with different color markers:

#grad {
  background-image: radial-gradient(red 5%, green 15%, blue 60%);
}

Prova själv

Exempel 3

Radiala gradienter med cirkulär form:

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Prova själv

Exempel 4

Använd olika storleksnyckelord för radiala gradienter:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}

Prova själv

CSS syntax

radial-gradient(shape size at position, start-color, ... , last-color);

Värde	Beskrivning
shape	Definiera formen för gradienten. Möjliga värden: ellipse (standard) circle
size	Definiera storleken på gradienten. Möjliga värden: farthest-corner (standard) closest-side closest-corner farthest-side
position	Definiera positionen för gradienten. Standardvärdet är "center".
start-color, ... , last-color	Färgmärken är de färger du vill visa en smidig övergång mellan. Värdet består av en färgvärde följt av en eller två valfria färgmärkespositioner (en procentandel mellan 0% och 100% eller längd längs med gradientaxeln).