Farveovergange med gradient

2 dækkende farver - top til bund

top til bund - sort til blå
background: linear-gradient(to bottom, #000, blue);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr=#000000, endColorstr=#0000FF )";
IE browsersupport
  • gradient: IE10 og frem
  • ms-filter ARGB: IE8 og IE9
2 dækkende farver - venstre mod højre
venstre mod højre - sort til blå
background: linear-gradient(to right, #000, blue);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr=#000000, endColorstr=#0000FF, GradientType=1 )";
IE browsersupport
  • gradient: IE10 og frem
  • ms-filter ARGB: IE8 og IE9

'GradientType=1' vender retningen til venstre mod højre - 'GradientType=0' er top til bund og default

1 dækkende farve + 1 helt gennemsigtig - top til bund

top til bund - sort til helt gennemsigtig
  	background: -webkit-linear-gradient(top, #000, transparent); 	
background: linear-gradient(to bottom, #000, transparent);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr=#000000, endColorstr=#00000000 )";
IE browsersupport
  • gradient: IE10 og frem
  • ms-filter ARGB: IE8 og IE9
1 dækkende farve + 1 helt gennemsigtig - venstre mod højre
venstre mod højre - sort til helt gennemsigtig
background: linear-gradient(to right, #000, transparent);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr=#000000, endColorstr=#00000000, GradientType=1 )";
IE browsersupport
  • gradient: IE10 og frem
  • ms-filter ARGB: IE8 og IE9

'GradientType=1' vender retningen til venstre mod højre - 'GradientType=0' er top til bund og default

1 dækkende farve + 1 delvist gennemsigtig - top til bund

top til bund - sort til gennemsigtig blå
background: linear-gradient(to bottom, #000, rgba(0, 0, 255, 0.5));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#500000FF )";
IE browsersupport
  • gradient: IE10 og frem
  • ms-filter ARGB: IE8 og IE9
1 dækkende farve + 1 delvist gennemsigtig - venstre mod højre
enstre mod højre - sort til gennemsigtig blå
 
background: linear-gradient(to right, #000, rgba(0, 0, 255, 0.5));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#500000FF, GradientType=1 )";
IE browsersupport
  • gradient: IE10 og frem
  • ms-filter ARGB: IE8 og IE9

'GradientType=1' vender retningen til venstre mod højre - 'GradientType=0' er top til bund og default

2 gennemsigtige farver - top til bund

top til bund - gennemsigtig rød til gennemsigtig blå
   
background: linear-gradient(to bottom, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));   
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#50FF0000, endColorstr=#500000FF )";
IE browsersupport
  • gradient: IE10 og frem
  • ms-filter ARGB: IE8 og IE9
2 gennemsigtige farver - venstre mod højre
enstre mod højre - gennemsigtig rød til gennemsigtig blå
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#50FF0000, endColorstr=#500000FF, GradientType=1 )";
IE browsersupport
  • gradient: IE10 og frem
  • ms-filter ARGB: IE8 og IE9

'GradientType=1' vender retningen til venstre mod højre - 'GradientType=0' er top til bund og default

Farveovergange i CSS

Med 'gradients' gives der mulighed for at lave glidende overgange mellem forskellige farver - effekten opnås ved at indsætte værdien 'gradient' i 'property'en 'background'. Da 'gradients' kun kan benyttes i browsere som understyøtter CSS3, er det nødvendigt at bruge en alternativ løsning til både internet Explorer 9 og 8 - læs mere i slutningen af artiklen.

Effekten kan justeres på flere forskellige måder til for eksempel at lave farveovergange mellem 2 farver eller flere, som cirkulære farveovergange eller som overgange mellem en dækkende farve og en gennemsigtig - læs mere om gennemsigtige farver i artiklen "Gennemsigtige farver med opacity og RGBa".

Når farverne skal defineres, er der flere forskellige valgmuligheder som alle kan kombineres. Både farveskemaerne HEX og RGB kan bruges, og jeg kan definere farven ved hjælp at skrive farvens navn - dette vil dog begrænse farvevalget meget, og kan i øvrigt resultere i nuanceforskelle browserne imellem. Læs mere om farveskemaerne HEX og RGB i artiklen "Farveskemaerne HEX og RGB".

Gradients med 2 farver

Herunder en række eksempler på glidende farveovergange mellem 2 dækkende eller gennemsigtige farver. Jeg har valgt kun at medtage eksempler hvori der kan tilføjes løsning for IE8 også - uanset hvilken browser eksemplerne vises i, vil farveovergangene i eksemplerne se ud på nøjagtig samme måde. Læs mere detalgeret om browsersupport i artiklens sidste afsnit.

2 dækkende farver - top til bund

#gradient_vert_layer  {
	background: linear-gradient(to bottom, #000, blue);
}
Farveovergang mellem sort og blå startende fra toppen ('to bottom')
Div'en 'gradient_vert_layer' er placeret ovenpå øverste halvdel af en rød div med bogstavet A - se den fulde kode sidst i afsnittet

1 dækkende farve + 1 gennemsigtig - top til bund

#gradient_rgba_layer  {
	background: linear-gradient(to bottom, #000, rgba(0, 0, 255, 0.5));
}
Blå bliver gennemsigtig med RGBa - læs mere om RGBa i artiklen "Gennemsigtige farver"

Jeg kan i stedet for HEX bruge RGBa til den sorte farve også, og lave den dækkende i 'alpha'en med '1.0': 
#gradient_rgba_layer  {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 1.0), rgba(0, 0, 255, 0.5);
}

1 dækkende farve + 1 transparent - top til bund

#gradient_transp_vert_layer  {
	background: linear-gradient(to bottom, #000, transparent);
}
Jeg kan lave en af farverne gennemsigtige - her erstatter jeg den blå farve med 'transparent'

1 dækkende farve + 1 transparent - venstre mod højre

#gradient_horiz_layer  {
	background: linear-gradient(left, #000, transparent);

}
Vil jeg skifte farveovergangen fra vertikal til horizontal, indsætter jeg en retning -
her fortæller jeg i 'gradient', at farven sort skal starte i venstre side (left) og bevæge sig mod højre

Opacity browsersupport

Da 'gradient' er en del af CSS3, understøtter ældre browsere ikke brugen - se en oversigt over browserunderstøttelse af typerne af 'gradients' på caniuse.com. Det er derfor nødvendigt at bruge alternative løsninger, når jeg ønsker, at farveovergangene ser ens ud i alle browsere.

Internet Explorer

Internet Explorer (IE) understøtter først med version 10 'gradient', så for alle ældre versioner af IE er det nødvendigt at bruge et 'fallback' (en alternativ løsning).

Microsoft udviklede meget tidligt 'filtre' som i CSS kan lave farveovergange på nøjagtig samme måde som 'gradients'. Som erstatning for 'linear-gradient' kan jeg bruge "filteret ARGB", som i visningen er nøjagtig mage til - se nederst i artiklen.

Her et eksempel på et 'fallback' til IE9 og IE8. I 'filteret ARGB defineres en "start-" og en "slut-farve" - begge farver kan være dækkende, de kan være delvist eller helt gennemsigtige:

background: linear-gradient(to bottom, #000, blue);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr=#000000, endColorstr=#0000FF )";