{ freetool24 }
Developer Tools

CSS-Verläufe und Box-Schatten: Ein vollständiger visueller Leitfaden

Meistere CSS-Linearverläufe, Radialverläufe, konische Verläufe und mehrschichtige Box-Schatten – mit praktischen Mustern und Tools zur Generierung von produktionsreifem Code.

7 Min. Lesezeit

Bunter Verlaufshintergrund auf einem Laptop-Bildschirm

CSS-Verläufe und Box-Schatten gehören zu den wirkungsvollsten, aber am häufigsten unterschätzten visuellen Werkzeugen im Werkzeugkasten eines Webentwicklers. Richtig eingesetzt verleihen sie Benutzeroberflächen Tiefe, Hierarchie und Raffinesse. Schlecht eingesetzt lassen sie alles wie eine Website aus dem Jahr 2009 aussehen. Dieser Leitfaden vermittelt sowohl die Mechanik als auch das nötige Gespür.

CSS-Verläufe

Linearverläufe

Der häufigste Verlaufstyp. Wechselt in einer geraden Linie von einer Farbe zur anderen.

/* Einfach von links nach rechts */
background: linear-gradient(to right, #3b82f6, #8b5cf6);

/* Diagonal */
background: linear-gradient(135deg, #667eea, #764ba2);

/* Mehrere Haltepunkte */
background: linear-gradient(to right, #f093fb, #f5576c, #4facfe);

/* Mit Transparenz */
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8));

/* Harter Haltepunkt (kein Überblenden) */
background: linear-gradient(to right, #3b82f6 50%, #8b5cf6 50%);

Der Winkel kann in Grad angegeben werden (0deg = unten nach oben, 90deg = links nach rechts) oder mit Schlüsselwörtern (to top, to right, to bottom-right).

Radialverläufe

Strahlen von einem Mittelpunkt nach außen aus.

/* Kreisförmiger Verlauf */
background: radial-gradient(circle, #667eea, #764ba2);

/* Elliptisch (Standard) */
background: radial-gradient(ellipse, #f093fb, #f5576c);

/* Positionierter Mittelpunkt */
background: radial-gradient(circle at 30% 40%, #3b82f6, transparent);

/* Spotlight-Effekt */
background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);

Radialverläufe eignen sich perfekt für Spotlight-Effekte, Leuchten und Vignetten.

Konische Verläufe

Drehen sich um einen Mittelpunkt – wie ein Farbrad oder ein Tortendiagramm.

/* Farbrad */
background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);

/* Tortendiagramm-Segmente */
background: conic-gradient(
  #3b82f6 0% 35%,
  #8b5cf6 35% 60%,
  #10b981 60% 80%,
  #f59e0b 80% 100%
);

/* Schachbrettmuster */
background: conic-gradient(#eee 90deg, white 90deg 180deg, #eee 180deg 270deg, white 270deg);
background-size: 40px 40px;

Verlaufstext

Einer der beliebtesten modernen UI-Effekte:

.gradient-text {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Verlaufsüberlagerungen auf Bildern

Unverzichtbar für lesbaren Text über Fotos:

.hero {
  background-image:
    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.85) 100%),
    url('hero.jpg');
  background-size: cover;
}

Nutze unseren CSS Gradient Generator, um Verläufe visuell mit einer Live-Vorschau zu erstellen und das CSS mit einem Klick zu kopieren.

Box-Schatten

Die box-shadow-Syntax

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
  • offset-x / offset-y — Schattenposition (positiv = rechts/unten)
  • blur-radius — 0 = harte Kante, höher = weicher
  • spread-radius — positiv vergrößert den Schatten, negativ verkleinert ihn
  • inset — zeichnet den Schatten innerhalb des Elements statt außen

Grundlegende Schatten

/* Dezente Erhöhung */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

/* Karten-Schatten */
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);

/* Großer Modal-Schatten */
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);

/* Harter Schlagschatten (ohne Weichzeichnung) */
box-shadow: 4px 4px 0px #1e293b;

Mehrschichtige Schatten

Mehrere Schatten können durch Kommas gestapelt werden. Das ist der Schlüssel zu realistischen Schatten:

/* Material Design Elevation */
box-shadow:
  0 2px 1px -1px rgba(0,0,0,0.2),
  0 1px 1px 0 rgba(0,0,0,0.14),
  0 1px 3px 0 rgba(0,0,0,0.12);

/* Geschichtet für Tiefe */
box-shadow:
  0 1px 2px rgba(0,0,0,0.07),
  0 2px 4px rgba(0,0,0,0.07),
  0 4px 8px rgba(0,0,0,0.07),
  0 8px 16px rgba(0,0,0,0.07),
  0 16px 32px rgba(0,0,0,0.07);

Der zweite Ansatz verteilt die Schattenenergie über mehrere Ebenen und erzeugt so einen natürlicheren Tiefenabfall.

Innere Schatten

Zeichnet Schatten innerhalb des Elements – ideal für gedrückte Zustände und Eingabefelder:

/* Gedrückter Button-Zustand */
button:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Eingabefeld mit Tiefe */
input {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}

/* Mattglas-Innenschein */
.glass {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 4px 20px rgba(0,0,0,0.2);
}

Farbige Schatten

Schatten müssen nicht schwarz sein. Farbige Schatten verleihen Lebendigkeit:

/* Farbige Erhöhung */
.btn-primary {
  background: #3b82f6;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

/* Dark-Mode-Leuchten */
.card {
  background: #1e293b;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 8px 32px rgba(0,0,0,0.4);
}

Weiche Schattenübergänge

Schatten beim Hovern animieren für angenehme Interaktionen:

.card {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

Verläufe und Schatten kombinieren

Die poliertesten Benutzeroberflächen verwenden Verläufe und Schatten gemeinsam:

.premium-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 4px 6px -1px rgba(0,0,0,0.2),
    0 20px 40px -5px rgba(0,0,0,0.4);
}

.gradient-button {
  background: linear-gradient(135deg, #667eea, #764ba2);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transition: all 0.2s;
}

.gradient-button:hover {
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
  transform: translateY(-1px);
}

Tools für schnelleres Arbeiten

  • CSS Gradient Generator — Verläufe visuell erstellen mit mehreren Haltepunkten, Winkeln und Typen. Live-Vorschau mit Einzel-Klick-Kopieren.
  • CSS Box Shadow Generator — Mehrere Schatten schichten, Weichzeichnung/Ausbreitung/Farbe anpassen und sofort produktionsreifen CSS-Code erhalten.
  • Color Format Converter — Zwischen HEX, RGB, HSL und RGBA konvertieren – unverzichtbar beim Festlegen von Schattenopazitäten.
  • Color Palette Generator — Komplementäre, analoge und monochromatische Paletten generieren, um perfekte Farbpaare für Verläufe zu finden.

Verläufe und Schatten folgen derselben Regel wie gutes Design insgesamt: Zurückhaltung. Ein sorgfältig gestalteter Schatten oder Verlauf wertet ein Element auf. Ein Dutzend miteinander konkurrierende erzeugen nur Rauschen. Beherrsche die Techniken – und setze sie dann mit Bedacht ein.

Zurück zu allen ArtikelnTools durchsuchen