Zum Hauptinhalt springen

CSS-Gradient-Generator

Kostenloses Online-Tool zum visuellen Erstellen von linearen, radialen und konischen CSS-Gradienten und zum Kopieren des Codes.

Vorschau

Verlaufstyp

Winkel

°

Farbpunkte

%
%

CSS-Code

background: linear-gradient(90deg, #3498db 0%, #e74c3c 100%);

Vordefinierte Verläufe

Hauptfunktionen​

  • 3 Typen: Lineare, radiale und konische Gradienten
  • Echtzeit-Vorschau: Änderungen sofort sehen
  • Farbstopps: Bis zu 8 Farbstopps hinzufügen
  • Winkelsteuerung: Winkel für lineare/konische Gradienten einstellen (0-360°)
  • Positionssteuerung: Jede Farbposition von 0-100% einstellen
  • Voreinstellungen: 6 schöne Gradienten-Voreinstellungen
  • Ein-Klick-Kopieren: CSS-Code sofort kopieren

Gradient-Typen​

1. Linearer Gradient​

background: linear-gradient(90deg, #3498db 0%, #e74c3c 100%);
  • Farben wechseln in eine Richtung
  • Richtung durch Winkel angegeben (0° = oben, 90° = rechts, 180° = unten, 270° = links)
  • Am häufigsten verwendeter Typ

Anwendungsfälle:

  • Button-Hintergründe
  • Header-Hintergründe
  • Karten-Hintergründe

2. Radialer Gradient​

background: radial-gradient(circle, #3498db 0%, #e74c3c 100%);
  • Farben wechseln von der Mitte nach außen
  • Erzeugt kreisförmige Effekte
  • Nützlich für Spotlight-Effekte

Anwendungsfälle:

  • Hintergrund-Dekorationen
  • Button-Hover-Effekte
  • Logo-Hintergründe

3. Konischer Gradient​

background: conic-gradient(from 90deg, #3498db 0%, #e74c3c 100%);
  • Farben rotieren um die Mitte
  • Perfekt für Tortendiagramme und Farbräder
  • Relativ neue Funktion, die in CSS3 hinzugefügt wurde

Anwendungsfälle:

  • Tortendiagramme
  • Fortschrittsringe
  • Farbräder

Farbstopps​

Grundkonzept​

Farbstopps definieren, wo bestimmte Farben in einem Gradienten beginnen oder enden.

/* 2 Farben */
linear-gradient(90deg, #FF0000 0%, #0000FF 100%)

/* 3 Farben */
linear-gradient(90deg, #FF0000 0%, #00FF00 50%, #0000FF 100%)

/* 4 Farben */
linear-gradient(90deg, #FF0000 0%, #FFFF00 33%, #00FF00 66%, #0000FF 100%)

Positionstipps​

  • 0%: Startpunkt
  • 50%: Mittelpunkt
  • 100%: Endpunkt
  • Überlappende Positionen erzeugen scharfe Farbübergänge
  • Gleichmäßige Verteilung erzeugt glatte Übergänge

Praktische Beispiele​

1. Button-Gradient​

.button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.button:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

2. Hintergrund-Overlay​

.hero-section {
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
              url('background.jpg');
  background-size: cover;
}

3. Text-Gradient​

.gradient-text {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 48px;
  font-weight: bold;
}

4. Fortschrittsbalken​

.progress-bar {
  background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
  height: 8px;
  border-radius: 4px;
  width: 60%; /* Fortschrittsstatus */
}

5. Karten-Hintergrund​

.card {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  padding: 30px;
  border-radius: 12px;
  color: white;
}

Voreingestellte Gradienten​

Sunset (Sonnenuntergang)​

background: linear-gradient(90deg, #FF512F 0%, #F09819 100%);

Warme Orange-Rot-Kombination, lebhaftes Gefühl

Ocean (Ozean)​

background: linear-gradient(135deg, #2E3192 0%, #1BFFFF 100%);

Kühle Blau-Cyan-Kombination, sauberes und frisches Gefühl

Forest (Wald)​

background: linear-gradient(90deg, #134E5E 0%, #71B280 100%);

Ruhige Türkis-Grün-Kombination, natürliches Gefühl

Purple Dream (Lila Traum)​

background: linear-gradient(45deg, #C471F5 0%, #FA71CD 100%);

Verträumte Lila-Rosa-Kombination, modern und trendy

Fire (Feuer)​

background: radial-gradient(circle, #FDBB2D 0%, #22C1C3 100%);

Radiale Gelb-Cyan-Kombination, dynamisches Gefühl

Rainbow (Regenbogen)​

background: linear-gradient(90deg, #FF0000 0%, #FFFF00 33%, #00FF00 66%, #0000FF 100%);

4-Farben-Regenbogeneffekt, lebendig und lebhaft

Browser-Kompatibilität​

Linearer Gradient​

  • ✅ Chrome 26+
  • ✅ Firefox 16+
  • ✅ Safari 7+
  • ✅ Edge 12+
  • ✅ Alle mobilen Browser

Radialer Gradient​

  • ✅ Chrome 26+
  • ✅ Firefox 16+
  • ✅ Safari 7+
  • ✅ Edge 12+
  • ✅ Alle mobilen Browser

Konischer Gradient​

  • ✅ Chrome 69+
  • ✅ Firefox 83+
  • ✅ Safari 12.1+
  • ✅ Edge 79+
  • ⚠️ Nicht unterstützt in IE

Leistungsoptimierung​

1. will-change verwenden​

.gradient-element {
  will-change: background;
}

GPU-Beschleunigung für Animationen

2. Bilder für komplexe Gradienten verwenden​

Sehr komplexe Gradienten in Bilder konvertieren für bessere Leistung

3. Wiederverwendbare Klassen​

.gradient-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Design-Tipps​

1. Farbauswahl​

  • Ähnliche Farbtöne: Glatter Übergang
  • Komplementärfarben: Starker Kontrast
  • 3 oder weniger Farben: Meist ausreichend

2. Winkelauswahl​

  • 90°: Links nach rechts (am häufigsten)
  • 180°: Oben nach unten
  • 135°: Diagonal (dynamisches Gefühl)

3. Transparenz verwenden​

background: linear-gradient(90deg,
  rgba(52, 152, 219, 0.8) 0%,
  rgba(231, 76, 60, 0.8) 100%
);

4. Animationen​

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animated-gradient {
  background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

Barrierefreiheit​

1. Kontrastverhältnis​

Text auf Gradienten benötigt ausreichendes Kontrastverhältnis (WCAG-Standard 4.5:1)

2. Textlesbarkeit​

/* Lesbarkeit mit Textschatten verbessern */
.text-on-gradient {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

3. Overlays verwenden​

.gradient-with-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}

Verwandte Tools​