CSS-Verläufe sind eines der mächtigsten visuellen Werkzeuge. Sie erzeugen fließende Farbübergänge ohne Bilder. Dieser vollständige CSS-Gradient-Guide deckt alles ab.
Erstellen Sie Verläufe visuell mit unserem CSS Gradient Generator →
Lineare Verläufe
Lineare Verläufe wechseln Farben entlang einer geraden Linie.
Basic Syntax
/* Default: top to bottom */
background: linear-gradient(#3b82f6, #8b5cf6);
/* With direction */
background: linear-gradient(to right, #3b82f6, #8b5cf6);
/* With angle */
background: linear-gradient(45deg, #3b82f6, #8b5cf6);
/* Multiple color stops */
background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #3b82f6);
/* Color stops with positions */
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);Direction Keywords
background: linear-gradient(to top, ...); /* 0deg */
background: linear-gradient(to right, ...); /* 90deg */
background: linear-gradient(to bottom, ...); /* 180deg - default */
background: linear-gradient(to left, ...); /* 270deg */
background: linear-gradient(to top right, ...); /* diagonal */
background: linear-gradient(to bottom left, ...); /* diagonal */Hard Color Stops (Sharp Transitions)
/* Sharp 50/50 split */
background: linear-gradient(90deg, #3b82f6 50%, #ef4444 50%);
/* Three equal sections */
background: linear-gradient(90deg,
#3b82f6 33.3%, #22c55e 33.3%,
#22c55e 66.6%, #ef4444 66.6%
);Radiale Verläufe
Radiale Verläufe strahlen von einem Mittelpunkt nach außen.
/* Default: ellipse at center */
background: radial-gradient(#3b82f6, #1e1b4b);
/* Circle shape */
background: radial-gradient(circle, #3b82f6, #1e1b4b);
/* Positioned center */
background: radial-gradient(circle at top left, #3b82f6, #1e1b4b);
background: radial-gradient(circle at 25% 75%, #3b82f6, #1e1b4b);
/* Sized circle */
background: radial-gradient(circle 200px at center, #3b82f6, transparent);
/* Size keywords */
background: radial-gradient(closest-side, #3b82f6, #1e1b4b);
background: radial-gradient(farthest-corner, #3b82f6, #1e1b4b);
/* Spotlight effect */
background: radial-gradient(circle 300px at 50% 30%,
rgba(59, 130, 246, 0.3), transparent
);Konische Verläufe
Konische Verläufe wechseln um einen Mittelpunkt herum.
/* Basic color wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
/* Pie chart */
background: conic-gradient(
#3b82f6 0deg 120deg, /* 33% */
#22c55e 120deg 210deg, /* 25% */
#f59e0b 210deg 300deg, /* 25% */
#ef4444 300deg 360deg /* 17% */
);
/* Starting angle and position */
background: conic-gradient(from 45deg at 50% 50%, #3b82f6, #8b5cf6, #3b82f6);
/* Donut chart (combine with radial) */
background:
radial-gradient(circle 60px, var(--bg-primary) 99%, transparent),
conic-gradient(#3b82f6 0% 40%, #22c55e 40% 70%, #ef4444 70% 100%);
border-radius: 50%;Wiederholende Verläufe
Erstellen Sie Streifen und Muster.
/* Diagonal stripes */
background: repeating-linear-gradient(
45deg,
#3b82f6, #3b82f6 10px,
transparent 10px, transparent 20px
);
/* Horizontal stripes */
background: repeating-linear-gradient(
0deg,
#1e1b4b, #1e1b4b 2px,
transparent 2px, transparent 20px
);
/* Repeating radial */
background: repeating-radial-gradient(
circle, #3b82f6, #3b82f6 5px,
transparent 5px, transparent 15px
);
/* Repeating conic (sunburst) */
background: repeating-conic-gradient(
#3b82f6 0deg 10deg, transparent 10deg 20deg
);Mehrfach-Verläufe
Mehrere Verläufe auf einem Element stapeln.
/* Spotlight overlay on gradient */
background:
radial-gradient(circle at 30% 40%, rgba(255,255,255,0.1), transparent 50%),
linear-gradient(135deg, #0f172a, #1e1b4b);
/* Cross pattern */
background:
linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,0.05) 49.5%, rgba(255,255,255,0.05) 50.5%, transparent 50.5%),
linear-gradient(0deg, transparent 49.5%, rgba(255,255,255,0.05) 49.5%, rgba(255,255,255,0.05) 50.5%, transparent 50.5%);
background-size: 40px 40px;Verlaufstext
Wenden Sie Verläufe auf Text mit background-clip an.
/* Gradient text effect */
.gradient-text {
background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; /* fallback */
}
/* Animated gradient text (using @property) */
@property --gradient-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.animated-gradient-text {
background: linear-gradient(var(--gradient-angle), #3b82f6, #ec4899, #3b82f6);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: rotate-gradient 3s linear infinite;
}
@keyframes rotate-gradient {
to { --gradient-angle: 360deg; }
}Verlaufsränder
CSS unterstützt keine direkten Gradient-Ränder.
/* Method 1: border-image (no border-radius support) */
.gradient-border-1 {
border: 3px solid;
border-image: linear-gradient(135deg, #3b82f6, #ec4899) 1;
}
/* Method 2: pseudo-element (supports border-radius) */
.gradient-border-2 {
position: relative;
border-radius: 12px;
padding: 3px; /* border width */
background: linear-gradient(135deg, #3b82f6, #ec4899);
}
.gradient-border-2::before {
content: '';
position: absolute;
inset: 3px; /* same as padding */
background: var(--bg-card); /* inner background */
border-radius: 9px; /* outer radius minus border width */
}
.gradient-border-2 > * { position: relative; }
/* Method 3: outline + mask (modern browsers) */
.gradient-border-3 {
background:
linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
linear-gradient(135deg, #3b82f6, #ec4899) border-box;
border: 3px solid transparent;
border-radius: 12px;
}Kreative Muster
Kombinieren Sie Verläufe für komplexe Muster.
/* Checkerboard */
background:
conic-gradient(#1e293b 90deg, transparent 90deg 180deg,
#1e293b 180deg 270deg, transparent 270deg) 0 0 / 40px 40px;
/* Dots */
background:
radial-gradient(circle 3px, #3b82f6 99%, transparent) 0 0 / 20px 20px;
/* Carbon fiber */
background:
radial-gradient(#333 15%, transparent 16%),
radial-gradient(#333 15%, transparent 16%);
background-size: 8px 8px;
background-position: 0 0, 4px 4px;
background-color: #222;Performance & Kompatibilität
Verläufe werden vom GPU gerendert.
- GPU-rendered: Gradients are composited by the GPU, making them faster than equivalent images.
- Zero HTTP requests: Unlike background images, gradients add no network overhead.
- Retina-ready: Gradients scale perfectly at any resolution without becoming pixelated.
- Browser support: Linear and radial gradients have 99%+ support. Conic gradients work in all modern browsers (Chrome, Firefox, Safari, Edge). Use
@supportsfor progressive enhancement if targeting older browsers. - Avoid: Extremely complex gradients with 20+ color stops on elements that reflow frequently.
Häufige Fragen
Kann man CSS-Verläufe animieren?
Nicht direkt, aber mit @property oder background-position.
Unterschied linear-gradient vs radial-gradient?
Linear = gerade Linie. Radial = vom Zentrum nach außen.
Wie erstellt man einen Verlaufsrand?
Mit border-image oder Pseudo-Elementen.
Beeinflussen Verläufe die Performance?
Nein, GPU-gerendert und schneller als Bilder.
Wie vermeidet man Farbbanding?
Zwischenstopps hinzufügen und längere Übergänge verwenden.
CSS-Verläufe sind vielseitig. Experimentieren Sie mit unserem Tool.