CSS-gradienter

Innehållsförteckning

    Visa innehållsförteckning

Gradientbakgrunder:

Gradient Backgrounds

CSS-gradienter låter dig visa mjuka övergångar mellan två eller fler specificerade färger.

CSS definierar tre typer av gradienter:

  • Linjära gradienter (går ner/upp/vänster/höger/diagonalt)

  • Radiella gradienter (definieras av deras mitt)

  • Koniska gradienter (roterad runt en mittpunkt)

CSS linjära gradienter

För att skapa en linjär gradient måste du definiera minst två färgstopp. Färgstopp är de färger du vill göra mjuka övergångar bland. Du kan också ställa in en startpunkt och en riktning (eller en vinkel) längs med gradienteffekten.

Syntax

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Riktning - topp till botten (detta är standard)

Följande exempel visar en linjär gradient som börjar längst upp. Det börjar rött, övergår till gult:

top to bottom (default)

Exempel

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

Prova själv →

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

<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>

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

</body>
</html>

Riktning - vänster till höger

Följande exempel visar en linjär gradient som börjar från vänster. Det börjar rött, övergår till gul:

left to right

Exempel

  #grad {
  background-image: linear-gradient(to right, red , yellow);
}

Prova själv →

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

<h1>Linear Gradient - Left to Right</h1>
<p>This linear gradient starts red at the left, transitioning to yellow (to the right):</p>

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

</body>
</html>

Riktning - Diagonal

Du kan göra en gradient diagonalt genom att ange både den horisontella och vertikala startpositionen.

Följande exempel visar en linjär gradient som börjar längst upp till vänster (och går längst ner till höger). Det börjar rött, övergår till gult:

top left to bottom right

Exempel

   #grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

Prova själv →

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

<h1>Linear Gradient - Diagonal</h1>
<p>This linear gradient starts red at top left, transitioning to yellow (at bottom right):</p>

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

</body>
</html>

Använder vinklar

Om du vill ha mer kontroll över gradientens riktning, du kan definiera en vinkel istället för de fördefinierade riktningarna (till botten, till upptill, till höger, till vänster, till nedre höger, etc.). Ett värde på 0deg motsvarar "till toppen". Ett värde på 90 grader motsvarar "till höger". Ett värde på 180 grader motsvarar "till botten".

Syntax

background-image: linear-gradient(angle, color-stop1, color-stop2);

Följande exempel visar hur man använder vinklar på linjära gradienter:

180deg

Exempel

  #grad {
  background-image: linear-gradient(180deg, red, yellow);
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(0deg, red, yellow);
}

#grad2 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(90deg, red, yellow);
}

#grad3 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(180deg, red, yellow);
}

#grad4 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(-90deg, red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradients - Using Different Angles</h1>

<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>

</body>
</html>

Använda flera färgstopp

Följande exempel visar en linjär gradient (uppifrån och ned) med flera färgstopp:

Exempel

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

Prova själv →

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

#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}

#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red 10%, green 85%, blue 90%);
}
</style>
</head>
<body>

<h1>Linear Gradients - Multiple Color Stops</h1>
<p><strong>Note:</strong> Color stops are spaced evenly when no percents are specified.</p>

<h2>3 Color Stops (evenly spaced):</h2>
<div id="grad1"></div>

<h2>7 Color Stops (evenly spaced):</h2>
<div id="grad2"></div>

<h2>3 Color Stops (not evenly spaced):</h2>
<div id="grad3"></div>

</body>
</html>

Följande exempel visar hur man skapar en linjär gradient (från vänster till höger) med regnbågens färg och lite text:

Rainbow Background

Exempel

   #grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 55px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>

<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
Rainbow Background
</div>

</body>
</html>

Använda Transparens

CSS-gradienter stöder också transparens, som kan användas för att skapa blekningseffekter.

För att lägga till transparens använder vi funktionen rgba() för att definiera färgstoppen. Den sista parametern i rgba()-funktionen kan vara ett värde från 0 till 1, och den definierar färgens genomskinlighet: 0 anger full genomskinlighet, 1 indikerar fullfärg (ingen genomskinlighet).

Följande exempel visar en linjär gradient som börjar från vänster. Den börjar helt genomskinlig och övergår till fullfärg röd:

Exempel

  #grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), 
rgba(255,0,0,1));
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>

<h1>Linear Gradient - Transparency</h1>
<p>To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).</p>

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

</body>
</html>

Upprepa en linjär gradient

Funktionen repeating-linear-gradient() används för att upprepa linjära gradienter:

Exempel

En repeterande linjär gradient:

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

Prova själv →

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

#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%);
}

#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%);
}

#grad4 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%);
}

#grad5 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(45deg, red 0px, red 10px, red 10px, yellow 10px, yellow 20px);
}
</style>
</head>
<body>

<h1>Repeating Linear Gradient</h1>

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

<p>A repeating gradient on 45deg axe starting red and finishing green:</p>
<div id="grad2"></div>

<p>A repeating gradient on 190deg axe starting red and finishing green:</p>
<div id="grad3"></div>

<p>A repeating gradient on 90deg axe starting red and finishing green:</p>
<div id="grad4"></div>

<p>A repeating linear gradient with solid stripes:</p>
<div id="grad5"></div>

</body>
</html>