Barvni prehodi v CSS3 omogočajo izdelavo gladkih barnih prehodov med dvema ali večimi barvami. Definirani sta dve vrsti barvnih prehodov:
Pred uvedbo oblikovne lastnosti barvnih prehodov v CSS3 je bilo mogoče efekt barvnega prehoda doseči le z uporabo slik.
Prednost uporabe barvnih prehodov CSS3 je večja pretočnost spletne strani (manjša velikost strani) in lepši izgled pri povečavi strani.
Linearni barvni prehod
Za kreiranje linearnega barvnega prehoda moramo definirati vsaj dve barvi, ki bosta kreirali prehod. Sintaktično je linearni barvni prehod definiran takole:
background: linear-gradient(smer, barva1, barva2, ...)
Primer linearnega barvnega prehoda od vrha proti dnu, kar je tudi privzeta vrednost:
<div id="prehod"></div>#prehod {
width: auto;
height: 100px;
background: linear-gradient(orange, blue)
}Primer linearnega barvnega prehoda od leve proti desni s tremi barvami:
<div id="prehod"></div>#prehod {
width: auto;
height: 100px;
background: linear-gradient(to right, orange, blue, red)
}Primer diagonalnega linearnega barvnega prehoda od levega zgornjega roba proti desnemu spodnjemu robu:
<div id="prehod"></div>#prehod {
width: auto;
height: 100px;
background: linear-gradient(to right bottom, orange, blue, red)
}Primer linearnega barvnega prehoda, ki ga določimo s kotom:
<div id="prehod30"></div>
<div id="prehod-30"></div>#prehod30 {
width: auto;
height: 100px;
background: linear-gradient(30deg, orange, blue)
}
#prehod-30 {
width: auto;
height: 100px;
background: linear-gradient(-30deg, orange, blue)
}Radialni barvni prehod
Radialni barvni prehod je definiran z obliko, velikostjo, smerjo in vsaj dvema barvama:
background: radial-gradient(50px circle at top right, red blue)
Primer radialnega barvnega prehoda dveh barv:
<div id="prehod"></div>#prehod {
width: auto;
height: 300px;
background: radial-gradient(orange, blue)
}