CSS Gradient Generator

Was ist ein CSS-Gradient?

Ein CSS-Gradient-Generator ist ein visuelles Tool, das beim Erstellen weicher Farbübergänge hilft, ohne die Gradient-Syntax manuell schreiben zu müssen. In CSS ist ein Gradient ein weicher Übergang zwischen zwei oder mehr Farben, der direkt vom Browser gerendert wird — ohne Bilddatei. Das CSS Image Module Level 4 definiert Gradient-Funktionen als einen Typ von Bildwert, sodass sie überall dort verwendet werden können, wo ein background-image-, list-style-image- oder border-image-Wert akzeptiert wird. Da der Browser Gradienten zur Renderzeit rastert, skalieren sie in jeder Auflösung und erzeugen auf hochauflösenden Displays keine unscharfen Artefakte. Ein CSS-Gradient-Generator spart Zeit und beseitigt Raterei — Farben und Positionen werden visuell angepasst, dann wird die fertige CSS-Regel kopiert.

CSS unterstützt drei Hauptverlaufsformen: linear (entlang einer geraden Linie), radial (von einem Mittelpunkt nach außen) und konisch (ein Schwenk um einen Mittelpunkt). Jede Form akzeptiert eine Liste von Farbstopps, bei denen Farbe und optional eine Position (Prozent oder Länge) angegeben werden. Der Browser interpoliert Farben zwischen Stopps standardmäßig im sRGB-Farbraum, obwohl CSS Color Level 4 die Angabe anderer Farbräume wie oklch und lab für wahrnehmungsmäßig weichere Übergänge erlaubt.

Gradienten ersetzen bildbasierte Hintergründe für die meisten dekorativen Zwecke im Web. Eine einzige CSS-Regel erzeugt, wofür früher ein Photoshop-Export und ein HTTP-Request nötig waren. Sie sind auflösungsunabhängig, benötigen keine Netzwerkbandbreite über das CSS selbst hinaus und können mit Standard-CSS-Eigenschaften animiert oder in Übergänge eingebunden werden. Die Gradient-Syntax ist seit 2013 in allen gängigen Browsern stabil, und die nicht präfixierte Form funktioniert in Chrome, Firefox, Safari und Edge ohne Fallbacks.

Warum diesen CSS-Gradient-Generator verwenden?

Gradient-Syntax manuell zu schreiben bedeutet, Stoppositionen zu raten, Winkelwerte zu prüfen und wiederholt die Seite neu zu laden, um das Ergebnis zu sehen. Ein visueller Builder zeigt den Gradient während des Aufbaus, ermöglicht das Verschieben von Stopps und erlaubt das Kopieren des fertigen CSS, sobald es stimmt.

Anwendungsfälle für den CSS-Gradient-Generator

CSS-Gradient-Typen Referenz

CSS definiert fünf Gradient-Funktionen. Die drei Grundtypen (linear, radial, konisch) haben jeweils eine Wiederholungsvariante, die das Muster kachelt. repeating-linear-gradient() und repeating-radial-gradient() eignen sich für gestreifte Hintergründe und konzentrische Ringe. Alle Gradient-Funktionen akzeptieren Farbstopps in jedem CSS-Farbformat: HEX, RGB, HSL, benannte Farben oder oklch. Die Browser-Unterstützung für alle fünf Funktionen ist in Chrome, Firefox, Safari und Edge praktisch universell — keine Vendor-Präfixe erforderlich.

Lineare vs. radiale vs. konische Gradienten

Jeder Gradient-Typ ordnet Farben einer anderen Geometrie zu. Die Wahl des richtigen Typs hängt vom gewünschten visuellen Effekt ab, nicht von einem Qualitätsunterschied zwischen ihnen. Für die meisten Seitenhintergründe und Abschnittstrennlinien ist ein linearer Gradient die richtige Wahl — er ist am einfachsten nachvollziehbar und verhält sich bei unterschiedlichen Elementgrößen am vorhersehbarsten. Radiale und konische Gradienten sind besser für spezifische visuelle Effekte geeignet, bei denen die kreisförmige oder rotatorische Geometrie bedeutungstragend statt nur dekorativ ist.

Code-Beispiele

Beispiele für das programmgesteuerte Erzeugen und Anwenden von CSS-Gradienten in JavaScript, Python, CSS und Go. Jedes Beispiel erzeugt gültige CSS-Gradient-Strings, die direkt in Stylesheets oder Inline-Styles verwendet werden können.

// Generate a CSS linear-gradient string from an array of stops
function buildGradient(angle, stops) {
  const parts = stops.map(s => `${s.color} ${s.position}%`)
  return `linear-gradient(${angle}deg, ${parts.join(', ')})`
}

const stops = [
  { color: '#6366f1', position: 0 },
  { color: '#ec4899', position: 50 },
  { color: '#f59e0b', position: 100 },
]
buildGradient(90, stops)
// -> "linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"

// Apply to an element
document.querySelector('.hero').style.background = buildGradient(135, stops)

# Generate a CSS gradient string for use in templates or SVGs
def build_gradient(angle: int, stops: list[tuple[str, int]]) -> str:
    parts = [f"{color} {pos}%" for color, pos in stops]
    return f"linear-gradient({angle}deg, {', '.join(parts)})"

stops = [("#6366f1", 0), ("#ec4899", 50), ("#f59e0b", 100)]
print(build_gradient(135, stops))
# -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"

# Interpolate N colors between two endpoints
def interpolate_hex(c1: str, c2: str, steps: int) -> list[str]:
    r1, g1, b1 = int(c1[1:3], 16), int(c1[3:5], 16), int(c1[5:7], 16)
    r2, g2, b2 = int(c2[1:3], 16), int(c2[3:5], 16), int(c2[5:7], 16)
    return [
        f"#{int(r1+(r2-r1)*i/(steps-1)):02x}"
        f"{int(g1+(g2-g1)*i/(steps-1)):02x}"
        f"{int(b1+(b2-b1)*i/(steps-1)):02x}"
        for i in range(steps)
    ]

interpolate_hex("#6366f1", "#f59e0b", 4)
# -> ['#6366f1', '#9a7399', '#d18042', '#f59e0b']

/* Linear gradient — left to right */
.hero {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);
}

/* Radial gradient — circular spotlight */
.badge {
  background: radial-gradient(circle at 30% 30%, #6366f1, #312e81);
}

/* Conic gradient — color wheel */
.wheel {
  background: conic-gradient(from 0deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6, #ef4444);
  border-radius: 50%;
}

/* Multi-stop with transparency */
.overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0.9) 100%
  );
}

/* Repeating stripes */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #6366f1 0 10px,
    transparent 10px 20px
  );
}

package main

import "fmt"

// Stop represents one color stop in a gradient.
type Stop struct {
	Color    string
	Position int // percent 0-100
}

func buildGradient(angle int, stops []Stop) string {
	result := fmt.Sprintf("linear-gradient(%ddeg", angle)
	for _, s := range stops {
		result += fmt.Sprintf(", %s %d%%", s.Color, s.Position)
	}
	return result + ")"
}

func main() {
	stops := []Stop{
		{"#6366f1", 0},
		{"#ec4899", 50},
		{"#f59e0b", 100},
	}
	fmt.Println(buildGradient(135, stops))
	// -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"
}

Häufig gestellte Fragen