Farbverlauf mit CSS
2 3 4 5 6 7 8Mit 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.
![[Bildschirmfoto]
Farbverlauf mit CSS [Bildschirmfoto]
Farbverlauf mit CSS](img/farbverlauf_css.png)
Auf den folgenden 8 Seiten finden Sie über 1700 Beispiele was alles mit dem Farbverlauf möglich ist.
Diverse ( Beispiele)
- Linearer Farbverlauf (linear-gradient)
- Linearer Farbverlauf wiederholen (repeating-linear-gradient)
- Radialer Farbverlauf (radial-gradient)
- Radialer Farbverlauf wiederholen (repeating-radial-gradient)
- Konischer Farbverlauf (conic-gradient)
- Konischer Farbverlauf wiederholen (repeating-conic-gradient)
Linearer Farbverlauf
Ein linearer Farbverlauf erzeugt ein Farbband, das in einer geraden Linie verläuft.
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(to bottom, #1ABC9C, #F1C40F, #3498DB, #E74C3C);
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%);
Linearer Farbverlauf wiederholen
Erstellt ein Bild, das aus sich wiederholenden linearen Verläufen besteht.
background: repeating-linear-gradient(#FFFA00 25%, #3DB7FF 75%);
background: repeating-linear-gradient(-45deg, #fff 0 20px, #f9f9f9 0 40px);
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);
background: radial-gradient(closest-side at 50% 50%, #FFFF00 50%, #00A3F0, #FFFFFF);
background: radial-gradient(circle closest-corner at 50% 50%, Cornsilk 50%, Crimson, Cornflowerblue);
Siehe: Farbnamen, Hexadezimal, Dezimal, Prozent und Negativ
Mauszeiger draufhalten!
Siehe: 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);
Konischer Farbverlauf wiederholen
background: repeating-conic-gradient(gold 0deg, white 45deg, gold 90deg);
Mauszeiger draufhalten!
Siehe: Container horizontal drehen
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(from 90deg, violet, indigo, blue, green, yellow, orange, red, violet); 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: repeating-conic-gradient(red, orange, yellow, green, blue, indigo, violet 45deg);
background: repeating-conic-gradient(Aliceblue, Antiquewhite, Cyan, Aquamarine, Azure, Beige, Bisque, Black, Blanchedalmond, Blue, Blueviolet, Brown, Burlywood, Cadetblue, Chartreuse, Chocolate, Coral, Cornflowerblue, Cornsilk, Crimson, Darkblue, Darkcyan, Darkgoldenrod, Darkgray, Darkgreen, Darkkhaki, Darkmagenta, Darkolivegreen, Darkorange, Darkorchid, Darkred, Darksalmon, Darkseagreen, Darkslateblue, Darkslategray, Darkturquoise, Darkviolet, Deeppink, Deepskyblue, Dimgray, Dodgerblue, Firebrick, Floralwhite, Forestgreen, Fuchsia, Gainsboro, Ghostwhite, Gold, Goldenrod, Green, Greenyellow, Honeydew, Hotpink, Indianred, Indigo, Ivory, Khaki, Lavender, Lavenderblush, Lawngreen, Lemonchiffon, Lightblue, Lightcoral, Lightcyan, Lightgoldenrodyellow, Lightgreen, Lightgrey, Lightpink, Lightsalmon, Lightseagreen, Lightskyblue, Lightslategray, Lightsteelblue, Lightyellow, Lime, Limegreen, Linen, Magenta, Maroon, Mediumaquamarine, Mediumblue, Mediumorchid, Mediumpurple, Mediumseagreen, Mediumslateblue, Mediumspringgreen, Mediumturquoise, Mediumvioletred, Midnightblue, Mintcream, Mistyrose, Moccasin, Navajowhite, Navy, Oldlace, Olive, Olivedrab, Orange, Orangered, Orchid, Palegoldenrod, Palegreen, Paleturquoise, Palevioletred, Papayawhip, Peachpuff, Peru, Pink, Plum, Powderblue, Purple, Rebeccapurple, Red, Rosybrown, Royalblue, Saddlebrown, Salmon, Sandybrown, Seagreen, Seashell, Sienna, Silver, Skyblue, Slateblue, Slategray, Snow, Springgreen, Steelblue, Tan, Teal, Thistle, Tomato, Turquoise, Violet, Wheat, White, Whitesmoke, Yellow, Yellowgreen, Gray, Darkgray, Darkslategray, Dimgray, Lightgray, Lightslategray, Slategray 45deg);
background: repeating-conic-gradient(Darkblue, Darkcyan, Darkgoldenrod, Darkgray, Darkgreen, Darkkhaki, Darkmagenta, Darkolivegreen, Darkorange, Darkorchid, Darkred, Darksalmon, Darkseagreen, Darkslateblue, Darkslategray, Darkturquoise, Darkviolet 45deg);
background: repeating-conic-gradient(Lightblue, Lightcoral, Lightcyan, Lightgoldenrodyellow, Lightgreen, Lightgrey, Lightpink, Lightsalmon, Lightseagreen, Lightskyblue, Lightslategray, Lightsteelblue, Lightyellow 45deg);
background: repeating-conic-gradient(rgba(208, 237, 92, 0.5), rgba(255, 166, 123, 0.5), rgba(255, 151, 255, 0.5) 45deg);
background: repeating-conic-gradient(rgba(208, 237, 92, 0.9), rgba(255, 166, 123, 0.9), rgba(255, 151, 255, 0.9) 45deg);
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);
background: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px);
Tipps
Animationen mit Keyframes • Blinkende Inhalte mit Keyframes • Animierte Sternebewertung • Regenbogen Text • Ladeanimation ohne Bild-Grafik • Box-Shadow Animation • Button Glas-Effekte • Kompass-Animation • Eine Animation ab einer bestimmten Scroll-Position starten • Bilder-Farbrotation mit Gradient • Animierte Box mit Keyframes • Transparenter Farbverlauf • Image-Highlight (Hero) Generator