Farbverlauf mit CSS 1 2 3 4 5 6 7 8

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.

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);

Farbverlauf mit CSS - Seite: 1 2 3 4 5 6 7 8

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