Die Entwickler-Tools, zu denen du jeden Tag greifst, alle an einem Ort.

Konverter, Formatter, Hashes, Validatoren und die kleinen Helfer, die du immer wieder öffnest, bleiben zusammen, statt zwischen Tabs verloren zu gehen.

GitHub

/ Tools

■

/ Tool-Finder

109 Tools

/ Verlaufs-Generator

Gradiententyp

Winkel: 90°

0°90°180°270°360°

Farb-Stopps

100%

Gradienten-Vorschau

CSS-Code

CSS-Eigenschaftswert

Background Image

/ Ausgewähltes Tool

■

Verlaufs-Generator - kostenloses Generator-Tool

Schöne CSS-Verläufe mit mehreren Farbstopps erstellen

■ 01

Was sind CSS-Verläufe?

CSS-Verläufe erzeugen weiche Übergänge zwischen zwei oder mehr Farben. Sie können als Hintergründe, Rahmen und andere Eigenschaften verwendet werden. Verläufe werden vom Browser gerendert und skalieren ohne Pixelbildung perfekt.

■ 02

Wie funktioniert es?

Verläufe funktionieren, indem Farbstopps an bestimmten Positionen entlang eines Pfades definiert werden. Lineare Verläufe lassen Farben entlang einer geraden Linie in einem bestimmten Winkel ineinander übergehen, während radiale Verläufe von einem Mittelpunkt nach außen übergehen…

■ 03

Beispielfälle

Deckt Linearer Verlauf, Radialer Verlauf und Verlauf mit mehreren Stopps ab, damit du gängige Ein- und Ausgaben schnell vergleichen kannst.

/ Verwandte Tools

/ Code

■

Quellcode des ausgewählten Tools, hier neben der Live-Version auf der rechten Seite gezeigt.

/ Quellcode

TypeScript

typescript

// No external dependencies needed - generates CSS gradient strings

interface ColorStop {
  color: string;
  position: number; // 0-100
}

type GradientType = 'linear' | 'radial';

interface GradientOptions {