Farbverlauf mit CSS
Mit der CSS3 Eigenschaft gradient
mit seinen Ausrichtungen (linear
, radial
, conic
) gibt es die Möglichkeit,
Farbverläufe bei der Umsetzung nicht mehr nur mittels Grafiken in die CSS-Dateien einbinden zu müssen.
Beispiele
background: linear-gradient(#3DB7FF, #FF00E9);
background: linear-gradient(#FFFA00, #59FA00, #00FFFA);
Angabe der Farben
Farbnamen | linear-gradient(Red, Blue); |
---|---|
Hexadezimal | linear-gradient(#FF1414, #0C0CFF); |
RGB | linear-gradient(rgb(255,20,20), rgb(12,10,255)); |
RGBA | linear-gradient(rgba(255,20,20,1), rgba(12,10,255,1)); |
HSL | linear-gradient(hsl(54,91%,96%), hsl(53,87%,58%)); |
HSLA | linear-gradient(hsla(54,91%,96%,1), hsla(53,87%,58%,1)); |
Die Richtung des Verlaufs ändern
background: linear-gradient(to right, #3DB7FF, #FF9A60);
Mögliche Werte sind:
to left
|
Nach Links |
to right
|
Nach Rechts |
to top
|
Nach Oben |
to bottom
|
Nach Unten |
45deg , -20deg
|
Grad |
Ein Beispiel mit der Angabe 45deg
das den Grad bestimmt.
background: linear-gradient(45deg, #FFF600, #A36BFF);
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
Somewhere over the rainbow way up high There's a land that I heard of once in a lullaby Somewhere over the rainbow skies are blue And the dreams that you dare to dream really do come true
<style> .rainbow { background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); font: 900 1.2em 'Comic Sans MS', fantasy, sans-serif; width: 500px; } .text { background-clip: text; -webkit-background-clip: text; color: rgba(0,0,0,.2); } </style> <div class="rainbow text">Somewhere over the rainbow ...</div>
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
background: linear-gradient( 45deg, #CA4246 16.666%, #E16541 16.666%, #E16541 33.333%, #F18F43 33.333%, #F18F43 50%, #8B9862 50%, #8B9862 66.666%, #476098 66.666%, #476098 83.333%, #A7489B 83.333%);
.css-selector { background: linear-gradient(48deg, #a65eca, #5eca7d, #ca985e, #ca5e86); background-size: 800% 800%; animation: AnimationName 16s ease infinite; } @keyframes AnimationName { 0%{background-position:90% 0%} 50%{background-position:11% 100%} 100%{background-position:90% 0%} }
Farbverlauf begrenzen
An welcher Stelle der Verlauf beginnt, wird durch die %-Angabe festgelegt. Für einen sauberen Verlauf müssen die %-Angaben also von links nach rechts immer höhere Werte aufweisen.
background: linear-gradient(#FFFA00 25%, #3DB7FF 75%);
Farbverlauf wiederholen
background: repeating-linear-gradient(#FFFA00 25%, #3DB7FF 75%);
background: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(0,0,0,1) 25px, rgba(255,255,255,1) 50px);
background: repeating-linear-gradient(45deg, Red, Red 5px, White 5px, White 10px);
background: repeating-linear-gradient(red, yellow 4%, green 9%);
Farbverlauf mit Hintergrundbild
background: url(bild.png) no-repeat center center, linear-gradient(#FFFFFF, #FFA3A3);
Radialer Farbverlauf
background: radial-gradient(circle, #3DB7FF 10%, #FFFFFF 84%);
Mögliche Werte sind:
circle , ellipse
|
closest-corner , closest-side , farthest-corner , farthest-side
|
Ein Beispiel mit der Angabe ellipse
und farthest-corner
background: radial-gradient(ellipse farthest-corner, #FFFFFF 30%, #3DB7FF 70%);
Mit
at top left
,
at top center
,
at top right
,
at center left
,
at center center
,
at center right
,
at bottom top left
,
at bottom center
und
at bottom right
bestimmt man die Position.
background: radial-gradient(circle at top right, #3DB7FF 10%, #FFFFFF 84%);
background: radial-gradient(circle at 100%, #0078BF, #3DB7FF 50%, #eee 75%, #333 75%);
Radialer Farbverlauf wiederholen
background: repeating-radial-gradient(circle, #FF7FED 40%, #0026FF 50%);
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
Mit der Anweisung: at 60%
verschieben Sie den Verlauf von der Mitte.
background: radial-gradient(at 60% 40px, #FF0000, #FFFF00, #008000);
background: radial-gradient(circle at 60% bottom, #FF0000, #FFFF00, #008000);Animationen mit Keyframes
<style> div.bd { width: 300px; height: 300px; margin: Auto; outline: Solid 1px #000000; background: url(apfel.gif) no-repeat center center, radial-gradient(circle closest-side, #FFFF00 0%, #FFA700 100%, transparent); margin-bottom: 25px; } div.bd:hover { animation:bdl 3s both running infinite alternate; } @keyframes bdl { 0% {background: url(apfel.gif) no-repeat center center, radial-gradient(circle closest-side, #FFFF00 0%, #FFA700 100%, transparent);} 5% {background: url(apfel.gif) no-repeat center center, radial-gradient(circle closest-side, #FFFF00 5%, #FFA700 100%, transparent);} 10% {background: url(apfel.gif) no-repeat center center, radial-gradient(circle closest-side, #FFFF00 10%, #FFA700 100%, transparent);} 15% {background: url(apfel.gif) no-repeat center center, radial-gradient(circle closest-side, #FFFF00 15%, #FFA700 100%, transparent);} 20% {background: url(apfel.gif) no-repeat center center, radial-gradient(circle closest-side, #FFFF00 20%, #FFA700 100%, transparent);} 25% {background: url(apfel.gif) no-repeat center center, radial-gradient(circle closest-side, #FFFF00 25%, #FFA700 100%, transparent);} 30% {background: url(apfel.gif) no-repeat center center, radial-gradient(circle closest-side, #FFFF00 30%, #FFA700 100%, transparent);} 35% {background: url(apfel.gif) no-repeat center center, radial-gradient(circle closest-side, #FFFF00 35%, #FFA700 100%, transparent);} 40% {background: url(apfel.gif) no-repeat center center, radial-gradient(circle closest-side, #FFFF00 40%, #FFA700 100%, transparent);} 45% {background: url(apfel.gif) no-repeat center center, radial-gradient(circle closest-side, #FFFF00 45%, #FFA700 100%, transparent);} 50% {background: url(apfel.gif) no-repeat center center, radial-gradient(circle closest-side, #FFFF00 50%, #FFA700 100%, transparent);} 55% {background: url(apfel.gif) no-repeat center center, radial-gradient(circle closest-side, #FFFF00 55%, #FFA700 100%, transparent);} 60% {background: url(apfel.gif) no-repeat center center, radial-gradient(circle closest-side, #FFFF00 60%, #FFA700 100%, transparent);} 65% {background: url(apfel.gif) no-repeat center center, radial-gradient(circle closest-side, #FFFF00 65%, #FFA700 100%, transparent);} 70% {background: url(apfel.gif) no-repeat center center, radial-gradient(circle closest-side, #FFFF00 70%, #FFA700 100%, transparent);} 75% {background: url(apfel.gif) no-repeat center center, radial-gradient(circle closest-side, #FFFF00 75%, #FFA700 100%, transparent);} 80% {background: url(apfel.gif) no-repeat center center, radial-gradient(circle closest-side, #FFFF00 80%, #FFA700 100%, transparent);} 85% {background: url(apfel.gif) no-repeat center center, radial-gradient(circle closest-side, #FFFF00 85%, #FFA700 100%, transparent);} 90% {background: url(apfel.gif) no-repeat center center, radial-gradient(circle closest-side, #FFFF00 90%, #FFA700 100%, transparent);} 95% {background: url(apfel.gif) no-repeat center center, radial-gradient(circle closest-side, #FFFF00 95%, #FFA700 100%, transparent);} 100% {background: url(apfel.gif) no-repeat center center, radial-gradient(circle closest-side, #FFFF00 100%, #FFA700 100%, transparent);} } </style> <div class="bd"></div>
div#demo1 { width: 444px; height: 207px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.4), transparent 20px, rgba(0, 0, 0, 0.4) 20px, transparent 20px), url(bild.png); }
background:repeating-linear-gradient(45deg, rgba(64, 64, 64, 0.52) 5%, rgba(221, 221, 221, 0.49) 10%), repeating-linear-gradient(-45deg, rgba(64, 64, 64, 0.52) 5%, rgba(221, 221, 221, 0.49) 10%);
background: repeating-linear-gradient(-45deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2) 5px, transparent 5px, transparent 10px), repeating-linear-gradient(45deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2) 5px, white 5px, white 10px);
background: repeating-linear-gradient(-10deg, rgba(220, 220, 220, 0.50), rgba(220, 220, 220, 0.50) 5px, transparent 5px, transparent 10px),repeating-linear-gradient(10deg, rgba(220, 220, 220, 0.50), rgba(220, 220, 220, 0.50) 5px, rgba(255, 255, 255, 0.50) 5px, rgba(255, 255, 255, 0.50) 10px);
background: repeating-linear-gradient(-45deg, rgba(255, 255, 0, 0.50), rgba(0, 255, 0, 0.50) 5px, transparent 5px, transparent 10px),repeating-linear-gradient(45deg, rgba(0, 0, 255, 0.50), rgba(255, 0, 0, 0.50) 5px, rgba(255, 255, 255, 0.50) 5px, rgba(255, 255, 255, 0.50) 10px);
Konischer Farbverlauf
background: conic-gradient(red, orange, yellow, green, blue);
background: conic-gradient(red, blue);
background: conic-gradient(from 90deg, red, blue);
background: conic-gradient(at 0% 30%, #c32e04 10%, yellow 30%, #306f91 50%);
background: conic-gradient(red, red 25%, gold 25%, gold 50%, lime 50%, lime 75%, blue 75%, blue);
background: conic-gradient(red, red 25%, gold 25%, gold 50%, lime 50%, lime 75%, blue 75%, blue); background-size: 25% 25%;
border-radius: 100%; background: conic-gradient(red, red 15%, blue 15%, blue);
border-radius: 100%; background: conic-gradient(red, red 15%, blue 15%, blue 70%, gold 70%, gold 100%);
background: conic-gradient(#c32e04 22deg, #df6c20 0 67deg, #dfac20 0 112deg, #8db243 0 157deg, hsl(85, 100%, 30%) 0 202deg, #306f91 0 247deg, #9357b9 0 292deg, #660033 0 337deg,#c32e04 0);
background: repeating-conic-gradient(gold 0deg, white 45deg, gold 90deg);
background: repeating-conic-gradient(silver 0deg, white 45deg, silver 90deg);
background: repeating-conic-gradient(#e6611e 0deg, white 45deg, #e6611e 90deg);
Mauszeiger draufhalten!
div#rad { width: 300px; height: 300px; border-radius: 100%; box-shadow: 0px 0px 7px 1px #000000; background: repeating-conic-gradient(red, blue 10%); animation: spin 2s linear infinite; animation-play-state: paused; } div#rad:hover { animation-play-state: running; } @keyframes spin { to { transform: rotate(1turn); } }
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); border-radius: 50%
background: conic-gradient(black 25%, white 0 50%, black 0 75%, white 0); background-size: 4em 4em;
background: #0ac repeating-conic-gradient(hsla(0,0%,100%,.2) 0 15deg, hsla(0,0%,100%,0) 0 30deg);
border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); border-image-slice: 1; border-radius: 50%; border-width: 10px; border-style: solid;
background: repeating-conic-gradient(from 7.5deg at 50% 0, transparent 0 15deg, gold 0 30deg)
background: conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);
background: repeating-conic-gradient(at left, white 0deg, black 30deg, white 60deg)
background: conic-gradient(silver, white, silver, white, silver, white, silver, white, silver, white, silver);
background: repeating-conic-gradient(gold, #f06 20deg);
background: repeating-conic-gradient(at 82%, darkblue, blue, aqua, white 20deg);
background: repeating-conic-gradient(at 20%, yellow, orange, pink, white 35deg);
background: repeating-conic-gradient(red, orange, yellow, green, blue, indigo, violet 15deg);
background: conic-gradient(from 45deg at center,#fff, #000 9turn);
background: conic-gradient(from 220deg at center,#fff, #000 4turn);
background: conic-gradient(#eee .1turn, black, #eee 326deg);
Texturen
background: conic-gradient(from 58deg at 72% 60%, #fff 1deg 108deg , transparent 109deg), conic-gradient(from 126deg at 50% 77%, #fff 1deg 108deg, transparent 109deg), conic-gradient(from 162deg at 50% 0, #ffd700 1deg 36deg, transparent 37deg), conic-gradient(from 90deg at 0% 40%, #ffd700 1deg 36deg, transparent 37deg); background-size:50px 50px;
background-color: silver; background-image: linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px); background-size: 58px 58px; background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
background-color:silver; background-image: radial-gradient(circle at 100% 150%, silver 24%, white 24%, white 28%, silver 28%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, silver 24%, white 24%, white 28%, silver 28%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 50% 100%, white 10%, silver 10%, silver 23%, white 23%, white 30%, silver 30%, silver 43%, white 43%, white 50%, silver 50%, silver 63%, white 63%, white 71%, transparent 71%, transparent), radial-gradient(circle at 100% 50%, white 5%, silver 5%, silver 15%, white 15%, white 20%, silver 20%, silver 29%, white 29%, white 34%, silver 34%, silver 44%, white 44%, white 49%, transparent 49%, transparent), radial-gradient(circle at 0 50%, white 5%, silver 5%, silver 15%, white 15%, white 20%, silver 20%, silver 29%, white 29%, white 34%, silver 34%, silver 44%, white 44%, white 49%, transparent 49%, transparent); background-size: 100px 50px;
background-color:#556; background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a); background-size:80px 140px; background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
background-color:#001; background-image: radial-gradient(white 15%, transparent 16%), radial-gradient(white 15%, transparent 16%); background-size: 60px 60px; background-position: 0 0, 30px 30px;
background: linear-gradient(-45deg, white 25%, transparent 25%, transparent 75%, black 75%, black) 0 0, linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, white 75%, white) 1em 1em, linear-gradient(45deg, black 17%, transparent 17%, transparent 25%, black 25%, black 36%, transparent 36%, transparent 64%, black 64%, black 75%, transparent 75%, transparent 83%, black 83%) 1em 1em; background-color: white; background-size: 2em 2em;
background-color: #eee; background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); background-size: 60px 60px;
background-color:#269; background-image: linear-gradient(white 2px, transparent 2px), linear-gradient(90deg, white 2px, transparent 2px), linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px); background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
background-color: #026873; background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%), linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%), linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%), linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%); background-size: 13px, 29px, 37px, 53px;
background: radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px, radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px, linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0, linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0, linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0, linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1; background-size: 40px 60px;
background: linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0), linear-gradient(135deg, transparent 37%, #a85 0, #a85 63%, transparent 0), linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753; background-size: 25px 25px;
background: radial-gradient(black 3px, transparent 4px), radial-gradient(black 3px, transparent 4px), linear-gradient(#fff 4px, transparent 0), linear-gradient(45deg, transparent 74px, transparent 75px, #a4a4a4 75px, #a4a4a4 76px, transparent 77px, transparent 109px), linear-gradient(-45deg, transparent 75px, transparent 76px, #a4a4a4 76px, #a4a4a4 77px, transparent 78px, transparent 109px), #fff; background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px; background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
background: linear-gradient(324deg, #232927 4%, transparent 4%) -70px 43px, linear-gradient( 36deg, #232927 4%, transparent 4%) 30px 43px, linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px, linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px, linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px, linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px, linear-gradient(324deg, #232927 4%, transparent 4%) -20px 93px, linear-gradient( 36deg, #232927 4%, transparent 4%) 80px 93px, linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px, linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px, linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px, linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px; background-color: #232927; background-size: 100px 100px;
background: radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent) 50px 50px, linear-gradient(#A8B1BB 8px, transparent 8px) 0 -4px, linear-gradient(90deg, #A8B1BB 8px, transparent 8px) -4px 0; background-color: slategray; background-size:100px 100px, 100px 100px, 50px 50px, 50px 50px;
background: radial-gradient(circle at 50% 59%, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0)) 50px 0, radial-gradient(circle at 50% 41%, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0)) 50px 0, radial-gradient(circle at 50% 59%, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0)) 0 50px, radial-gradient(circle at 50% 41%, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0)) 0 50px, radial-gradient(circle at 100% 50%, #D2CAAB 16%, rgba(210,202,171,0) 17%), radial-gradient(circle at 0% 50%, #364E27 16%, rgba(54,78,39,0) 17%), radial-gradient(circle at 100% 50%, #D2CAAB 16%, rgba(210,202,171,0) 17%) 50px 50px, radial-gradient(circle at 0% 50%, #364E27 16%, rgba(54,78,39,0) 17%) 50px 50px; background-color:#63773F; background-size:100px 100px;
background: radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%), radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%), radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%), radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%), radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%), radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px, radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px, radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px, radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px, radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%) 50px 50px; background-color:#b03; background-size:100px 100px;
background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; background-size:16px 16px;
background: radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%); background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%; background-color: #840b2a;
background: linear-gradient(135deg, #708090 21px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px), linear-gradient(225deg, #708090 21px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px; background-color:#708090; background-size: 64px 128px;
background: linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0, linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0, linear-gradient(315deg, #ECEDDC 25%, transparent 25%), linear-gradient(45deg, #ECEDDC 25%, transparent 25%); background-size: 100px 100px; background-color: #EC173A;
background: linear-gradient(63deg, #999 23%, transparent 23%) 7px 0, linear-gradient(63deg, transparent 74%, #999 78%), linear-gradient(63deg, transparent 34%, #999 38%, #999 58%, transparent 62%), #444; background-size: 16px 48px;
background: radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0, radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px, radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0, radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px, radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0, radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px, radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0, radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px, linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0, linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0; background-color: #300; background-size: 100px 100px;
background-color:white; background-image: radial-gradient(midnightblue 9px, transparent 10px), repeating-radial-gradient(midnightblue 0, midnightblue 4px, transparent 5px, transparent 20px, midnightblue 21px, midnightblue 25px, transparent 26px, transparent 50px); background-size: 30px 30px, 90px 90px; background-position: 0 0;
background-color: #FF7D9D; background-size: 58px 58px; background-position: 0px 2px, 4px 35px, 29px 31px, 33px 6px, 0px 36px, 4px 2px, 29px 6px, 33px 30px; background-image: linear-gradient(335deg, #C90032 23px, transparent 23px), linear-gradient(155deg, #C90032 23px, transparent 23px), linear-gradient(335deg, #C90032 23px, transparent 23px), linear-gradient(155deg, #C90032 23px, transparent 23px), linear-gradient(335deg, #C90032 10px, transparent 10px), linear-gradient(155deg, #C90032 10px, transparent 10px), linear-gradient(335deg, #C90032 10px, transparent 10px), linear-gradient(155deg, #C90032 10px, transparent 10px);
background: radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent), radial-gradient(circle at 0% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent) 0 -50px; background-color: slategray; background-size:75px 100px;
background-image: radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%), radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%); background-size: 110px 110px; background-color: #C8D3A7; background-position: 0 0, 55px 55px;
background-color:#def; background-image: radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%), radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%); background-size:80px 80px; background-position:0 0, 40px 40px;
background-color:white; background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%); background-size:50px 50px;
background-color: #fff; background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eee .1em, transparent .1em); background-size: 100% 1.2em;
background-color: hsl(34, 53%, 82%); background-image: repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px, hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px ), repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px, hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px );
background-color:#a3dd91; background-image: radial-gradient(circle closest-side, #a3dd91 61%,transparent 62%), radial-gradient(circle closest-side, transparent 85%, rgba(255,255,255,1) 86%,rgba(255,255,255,1) 99%, transparent 100%), radial-gradient(circle closest-side, transparent 85%, rgba(255,255,255,1) 86%,rgba(255,255,255,1) 99%, transparent 100%); background-size:100px 100px,100px 50px,50px 100px; background-position:0px 0px;
background: radial-gradient(1.5em 6.28571em at 1.95em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 55%, rgba(255, 255, 255, 0) 55%) 0 0, radial-gradient(1.5em 6.28571em at -0.45em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 55%, rgba(255, 255, 255, 0) 55%) 1.5em 5.5em, radial-gradient(2.3em 4.57143em at 2.99em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0) 55%) 0 0, radial-gradient(2.3em 4.57143em at -0.69em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0) 55%) 2.3em 4em, radial-gradient(3.5em 6.28571em at 4.55em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 55%, rgba(255, 255, 255, 0) 55%) 0 0, radial-gradient(3.5em 6.28571em at -1.05em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 55%, rgba(255, 255, 255, 0) 55%) 3.5em 5.5em, radial-gradient(#15ffa5, #00ced1); background-color: mediumspringgreen; background-size: 1.5em 11em, 1.5em 11em, 2.3em 8em, 2.3em 8em, 3.5em 11em, 3.5em 11em, 100% 100%; background-repeat: repeat;
background-color: #E5E5F7; opacity: 0.4; background-image: repeating-radial-gradient( circle at 0 0, transparent 0, #E5E5F7 20px ), repeating-linear-gradient( #444CF755, #444CF7 );
background-color: #E5E5F7; opacity: 0.4; background-image: linear-gradient(30deg, #444CF7 12%, transparent 12.5%, transparent 87%, #444CF7 87.5%, #444CF7), linear-gradient(150deg, #444CF7 12%, transparent 12.5%, transparent 87%, #444CF7 87.5%, #444CF7), linear-gradient(30deg, #444CF7 12%, transparent 12.5%, transparent 87%, #444CF7 87.5%, #444CF7), linear-gradient(150deg, #444CF7 12%, transparent 12.5%, transparent 87%, #444CF7 87.5%, #444CF7), linear-gradient(60deg, #444CF777 25%, transparent 25.5%, transparent 75%, #444CF777 75%, #444CF777), linear-gradient(60deg, #444CF777 25%, transparent 25.5%, transparent 75%, #444CF777 75%, #444CF777); background-size: 40px 70px; background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px;
background-color: #f76; background-image: linear-gradient(30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%), linear-gradient(-30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%), linear-gradient(30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%), linear-gradient(-30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%), linear-gradient(30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%), linear-gradient(-30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%), linear-gradient(30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%), linear-gradient(-30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%), linear-gradient(45deg, #544 25%, transparent 25%, transparent 75%, #544 75%), linear-gradient(45deg, #544 25%, transparent 25%, transparent 75%, #544 75%); background-position: 0em 2em, 0em 2em, 2em 4em, 2em 4em, 4em 2em, 4em 2em, 6em 4em, 6em 4em, 0em 0em, 2em 2em; background-size: 8em 4em, 8em 4em,8em 4em, 8em 4em, 8em 4em, 8em 4em, 8em 4em, 8em 4em, 4em 4em, 4em 4em;
background: repeating-radial-gradient( circle, transparent, transparent 3.5em, tomato 3.5em, tomato 4.5em ), repeating-radial-gradient( circle, transparent, transparent 3.5em, dodgerblue 3.5em, dodgerblue 4.5em ), repeating-radial-gradient( circle, transparent, transparent 2.5em, gold 2.5em, gold 2.75em ), floralwhite; background-blend-mode: multiply; background-size: 10em 10em; background-position: 0 0, 5em 5em, 10em 5em;
background-image: radial-gradient(circle at 15px 0, #360031 2px, #fba5ec 20px, rgba(255,255,255,0) 21px); background-repeat: repeat-x; background-position: 0 0; background-size: 30px 21px;
background: linear-gradient(#ffffff 50%, rgba(255,255,255,0) 0) 0 0, radial-gradient(circle closest-side, #FFFFFF 53%, rgba(255,255,255,0) 0) 0 0, radial-gradient(circle closest-side, #FFFFFF 50%, rgba(255,255,255,0) 0) 55px 0 #48B; background-size: 110px 200px;
background-image: radial-gradient(#090 0%, #fff, #2a4f32);background-size: 100px 100px;
background-image: repeating-radial-gradient(circle, darkblue, blue, aqua, white 6px);background-size: 55px 55px;
background: conic-gradient(from 45deg, hsla(13, 96%, 39%,1) 25%, hsla(13, 96%, 39%,0.86) 0% 50%, hsla(13, 96%, 39%,0.63) 0% 75%, hsla(13, 96%, 39%,0.50) 0%); background-size: 2em 2em;
background: conic-gradient(from 26.56505deg, white 0% 126.8699deg, DeepSkyBlue 0% 50%, white 0% 306.8699deg, DeepSkyBlue 0%) 0 0/ 16px 32px;
background-image: repeating-conic-gradient(from 45deg, black 0% 25%, white 0% 50%); background-size: 2em 2em;
Tipps
Mit dem Ultimate CSS Gradient Generator von ColorZilla können Sie einen Farbverlauf erstellen.