CSS-Verlaufsgenerator
Erstellen Sie lineare und radiale CSS-Verläufe. Wählen Sie die Farben visuell aus und kopieren Sie das generierte CSS.
background: linear-gradient(135deg, #535beb, #7c3aed);
So verwenden Sie dieses Tool
- 1
Click the Color 1 swatch and choose your starting color from the native color picker.
- 2
Click the Color 2 swatch and choose the color the gradient fades into.
- 3
Drag the Angle slider from 0 to 360 degrees to set the gradient direction; the live preview updates instantly.
- 4
Copy the generated background: linear-gradient(...) line from the code box into your stylesheet.
Was ist der CSS-Verlaufsgenerator?
CSS-Verläufe sind Farbübergänge zwischen zwei oder mehr Farben. Lineare Verläufe verlaufen in eine Richtung; radiale Verläufe gehen von einem Punkt aus. Dieser Generator deckt die gängigen Fälle ab; für komplexe Verläufe mit mehreren Stopps und benutzerdefinierten Positionen erstellen Sie diese manuell.
Häufige Anwendungsfälle
Creating a hero section or landing page banner background that fades between two brand colors.
Generating button and card backgrounds with a subtle two-tone diagonal fade.
Producing a gradient overlay placed above a photo to improve text contrast.
Prototyping color direction quickly by dragging the angle slider before committing to final values.
Grabbing a ready-to-paste linear-gradient string for a Tailwind, styled-components, or plain CSS file.
Teaching or demonstrating how gradient angle changes the visual direction of a fade.
Häufig gestellte Fragen
Sind Verläufe effizient?▼
Kann ich Verläufe animieren?▼
Verwandte Tools
Farbkonverter (HEX/RGB/HSL)
Wandeln Sie Farben zwischen den Formaten HEX, RGB und HSL um. Wählen Sie eine Farbe visuell aus oder geben Sie die Werte manuell ein.
CSS-Box-Shadow-Generator
Erstellen Sie box-shadow-Werte in CSS auf visuelle Weise. Vorschau in Echtzeit und Kopieren des generierten CSS.
Cubic-Bezier-Easing-Kurven-Generator
Erstellen Sie cubic-bezier-Easing-Kurven für CSS. Inklusive standardmäßiger Voreinstellungen.
Farbpaletten-Generator
Erzeugen Sie harmonische Farbpaletten aus jeder beliebigen Grundfarbe. Unterstützt komplementäre, analoge, triadische und monochromatische Schemata.
CSS-Border-Radius-Generator
Erstellen Sie komplexe border-radius-Werte in CSS auf visuelle Weise. Unabhängige Steuerung jeder Ecke.
CSS-clamp()-Generator
Erzeugen Sie fluide, responsive CSS-Werte mit clamp(). Skaliert gleichmäßig zwischen Mindest- und Höchstgrößen über die Viewport-Bereiche hinweg.