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

Specifikationer mm

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.