Gradient (farveovergange) - CSS

Lær at bruge CSS gradients med linear-gradient(), radial-gradient(), repeating-linear-gradient() og repeating-radial-gradient()

Introduktion

CSS gradient bruges til at give en glidende overgang mellem farver.

Demo

background-image: linear-gradient(...)
black, white
to left, gold, blue
0deg, gold 15%, green 85%, blue 100%
background-image: radial-gradient(...)
lime, black
100px circle at left, white, black
40% 100% ellipse at bottom, red 40%, yellow 60%
background-image: repeating-linear-gradient(...)
black 0px, white 20px
to right, pink 0%, red 10%
45deg, gold 5px, green 10px, gold 15px
background-image: repeating-radial-gradient(...)
30px circle, #00c900, #004A00 50%, #00c900
5px circle at left top, #000099, #0000FA 50%, #000099
10px circle at center 400px, #990000, #FA0000 50%, #990000
border-image:
border-image: + background-image:
list-style-image:
  1. A
  2. B
  3. C
LINEAR-GRADIENT DEMO
(PÅ EN SIDE FOR SIG SELV)
RADIAL-GRADIENT DEMO
(PÅ EN SIDE FOR SIG SELV)
REPEATING-LINEAR-GRADIENT DEMO
(PÅ EN SIDE FOR SIG SELV)
REPEATING-RADIAL-GRADIENT DEMO
(PÅ EN SIDE FOR SIG SELV)
BORDER-IMAGE DEMO
(PÅ EN SIDE FOR SIG SELV)
LIST-STYLE-IMAGE DEMO
(PÅ EN SIDE FOR SIG SELV)

Browserunderstøttelse af CSS gradient

Browser CSS gradient Property understøttelse Value understøttelse
Firefox logo
Firefox 29.0.1
ja background-image
border-image
list-style-image
linear-gradient
radial-gradient
repeating-linear-gradient
repeating-radial-gradient
Firefox logo
Firefox 27.0.1
ja background-image
border-image
list-style-image
linear-gradient
radial-gradient
repeating-linear-gradient
repeating-radial-gradient
Opera logo
Opera 12.15
ja background-image
border-image
list-style-image
-o-linear-gradient

-webkit-linear-gradient

linear-gradient
radial-gradient
repeating-linear-gradient
repeating-radial-gradient
Safari logo
Safari 5.1.7
ja
1 2
background-image
border-image
list-style-image
-webkit-linear-gradient
-webkit-radial-gradient
-webkit-repeating-linear-gradient
-webkit-repeating-radial-gradient
Chrome logo
Chrome 25.0.1364.172 m
ja
1 2
background-image
border-image 3
list-style-image
-webkit-linear-gradient
-webkit-radial-gradient
-webkit-repeating-linear-gradient
-webkit-repeating-radial-gradient
Internet Explorer logo
Internet Explorer 10.0.9200.16540
ja background-image
border-image
list-style-image
-ms-linear-gradient
-ms-radial-gradient
-ms-repeating-linear-gradient
-ms-repeating-radial-gradient

linear-gradient
radial-gradient
repeating-linear-gradient
repeating-radial-gradient
Alle tests er udført på Windows 7 (64-bit)


Der kan være lidt forskel på vinklen i linear-gradient(?deg) og parameter-rækkefølgen i radial-gradient().
radial-gradient(size shape at position,colour stops); // ny måde (Opera, Firefox and IE)
radial-gradient(position,size and shape,colour stops); // gammel måde (Chrome)
Jeg fokuser kun på de nye W3C specifikation.

1 "0deg" skal ifølge W3C pege op. Men i Safari og Chrome peger "0deg" til højre.

2 Forstår godt "Xdeg" men ikke "to X". For eksempel virker "180deg" men "to bottom" virker ikke.

3 Virker kun i hjørnerne og ikke i top, højre, bund, venstre selvom det virker i Safari 5.1.7.
Browserunderstøttelse fra caniuse.com :

Kode eksempler

Syntax

Siden er sidst opdateret mandag 25. juni 2018