CSS Gradient

Mergningsbakgrund

CSS gradienter låter dig visa en smidig övergång mellan två eller flera specifika färger.

CSS definierar två typer av gradienter:

  • Linjär gradient(nedåt/uppåt/vänster/höger/diagonal)
  • Radial gradient(definierad av dess mittpunkt)

CSS linjär gradient

För att skapa en linjär gradient måste du definiera minst två färgmärken. Färgmärken är de färger du vill visa en smidig övergång mellan. Du kan också ställa in startpunkt och riktning (eller vinkel) samt gradienteffekten.

syntaks

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

Linjär gradient - från topp till botten (standard)

Exempelvis visar följande exempel en linjär gradient som börjar från toppen. Den börjar med rött och övergår till gult:

Från topp till botten (som standard)}

Exempel

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

Prova själv

Linjär mergning - från vänster till höger

Följande exempel visar en linjär mergning som börjar till vänster. Den börjar med röd och övergår till gul:

Från vänster till höger

Exempel

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

Prova själv

Linjär mergning - diagonala

Du kan uppnå en diagonalmergning genom att specifika både den horisontella och vertikala startpositionen.

Följande exempel visar en linjär mergning som börjar i övre vänstra hörnet (till nederst till höger). Den börjar med röd och övergår till gul:

Överst till vänster till nederst till höger

Exempel

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

Prova själv

Använd vinkel

Om du vill ha mer kontroll över mergningens vinkel kan du definiera en vinkel för att ersätta förinställda riktningar (nedåt, uppåt, till höger, till vänster, till höger ned etc.). Värdet 0deg är lika med uppåt (till toppen). Värdet 90deg är lika med till höger (till höger). Värdet 180deg är lika med nedåt (till botten).

180deg

syntaks

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

Denna vinkel specificerar vinkeln mellan horisontlinjen och mergninglinjen.

Följande exempel visar hur man använder vinkeln i en linjär mergning:

Exempel

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

Prova själv

Använd flera färgindikatorer

Följande exempel visar en linjär mergning med flera färgindikatorer (från topp till botten):

Exempel

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

Prova själv

Följande exempel visar hur man skapar en linjär mergning (från vänster till höger) med regnbågensfärger och några texter:

Mergningsbakgrund

Exempel

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

Prova själv

Använd genomskinlighet

CSS-mergning stöder också genomskinlighet och kan användas för att skapa mergningseffekter.

För att lägga till genomskinlighet använder vi rgba() -funktionen för att definiera färgindikatorn. Den sista parameteren i rgba() -funktionen kan vara ett värde mellan 0 och 1 och definierar färgens genomskinlighet: 0 betyder helt genomskinlig, 1 betyder helt färgad (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 sedan till helt röd:

Exempel

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

Prova själv

Repetera linjär gradient

repeating-linear-gradient() Funktioner för att repetera linjär gradient:

Exempel

Repetera linjär gradient:

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

Prova själv