CSS Radiella Gradienter


Innehållsförteckning

    Visa innehållsförteckning


CSS Radiella Gradienter

En radiell gradient definieras av dess centrum.

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

Syntax

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

Som standard är formen ellips, storleken är längst bort och positionen är mitten.

Radiell övertoning - Jämnt fördelade färgstopp (detta är standard)

Följande exempel visar en radiell gradient med jämnt fördelade färgstopp:

Exempel

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

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(red, yellow, green);
}
</style>
</head>
<body>

<h1>Radial Gradient - Evenly Spaced Color Stops</h1>

<div id="grad1"></div>

</body>
</html>


Radial gradient - Färgstopp med olika avstånd

Följande exempel visar en radiell gradient med olika färgstopp:

Exempel

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

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
</style>
</head>
<body>

<h1>Radial Gradient - Differently Spaced Color Stops</h1>

<div id="grad1"></div>

</body>
</html>



Ställ in form

Formparametern definierar formen. Det kan ta värdecirkeln eller ellipsen. Standardvärdet är ellips.

Följande exempel visar en radiell gradient med formen av en cirkel:

Exempel

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

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(red, yellow, green);
}

#grad2 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(circle, red, yellow, green);
}
</style>
</head>
<body>

<h1>Radial Gradient - Shapes</h1>

<h2>Ellipse (this is default):</h2>
<div id="grad1"></div>

<h2><strong>Circle:</strong></h2>
<div id="grad2"></div>

</body>
</html>




Användning av nyckelord i olika storlekar

Parametern size definierar storleken på gradienten. Det kan ta fyra värden:

closest-side
farthest-side
closest-corner
farthest-corner

Exempel

En radiell gradient med sökord i olika storlekar:

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

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

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

#grad3 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
}

#grad4 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
}
</style>
</head>
<body>

<h1>Radial Gradients - Different size keywords</h1>

<h2>closest-side:</h2>
<div id="grad1"></div>

<h2>farthest-side:</h2>
<div id="grad2"></div>

<h2>closest-corner:</h2>
<div id="grad3"></div>

<h2>farthest-corner (default):</h2>
<div id="grad4"></div>

</body>
</html>



Upprepa en radiell gradient

Funktionen repeating-radial-gradient() används för att upprepa radiella gradienter:

Exempel

En upprepad radiell gradient:

   #grad {
  background-image: 
repeating-radial-gradient(red, yellow 10%, green 15%);
} 

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
</style>
</head>
<body>

<h1>Repeating Radial Gradient</h1>

<div id="grad1"></div>

</body>
</html>