What's the difference between linear, radial, and conic gradients?

Linear gradients flow in a straight line from one color to another, perfect for backgrounds and buttons. Radial gradients radiate from a center point outward, ideal for spotlight effects. Conic gradients rotate around a center point like a color wheel, great for loading spinners and creative designs.

How do I add multiple colors to my gradient?

Click the "Add Color Stop" button to add additional colors to your gradient. You can position each color stop at specific percentages along the gradient path and adjust their colors individually. Remove color stops by clicking the delete button next to each color.

Are the generated gradients compatible with all browsers?

Yes! Our generator produces CSS with all necessary browser prefixes (-webkit-, -moz-, -o-) and fallbacks for older browsers. The generated code works across all modern browsers and provides graceful degradation for legacy browsers.

Can I save or export my gradient designs?

Absolutely! Copy the generated CSS code directly, export as CSS files, or save gradient configurations as JSON for later use. You can also generate gradient images in various formats for use in design software or presentations.

How do I control gradient direction and angle?

For linear gradients, use the angle slider or input field to set precise degrees (0-360°). You can also use directional presets like "to top", "to bottom", "to right". For radial gradients, adjust the position and shape controls to customize the gradient's center point and spread.

What are some best practices for using gradients in web design?

Use subtle gradients for backgrounds to avoid overwhelming content. Ensure sufficient contrast for text readability. Consider accessibility by providing solid color fallbacks. Use gradients consistently throughout your design system, and test on different devices and screen sizes for optimal appearance.

CSS-Verlaufsgenerator

Weiche Übergänge zwischen zwei oder mehr Farben – mit Richtungssteuerung und Live-Vorschau

Verlaufseinstellungen

Verlaufstyp

Linear Radial Konisch

Richtung

Farbstopps

Verlaufsvorlagen

CSS-Code

Live-Vorschau

Vorschaugröße

Vorschauform

Verlaufswerkzeuge

Professioneller Verlaufsgenerator

Erstellen Sie beeindruckende CSS-Verläufe mit unserem Generator. Gestalten Sie lineare, radiale und konische Verläufe mit Echtzeitvorschau und sofort erzeugtem CSS-Code für moderne Webprojekte.

Warum unser Verlaufsgenerator?

Unser Verlaufstool bietet präzise Kontrolle über Farben, Winkel und Übergänge – mit Echtzeitvorschau und professionellem CSS-Code, der sich nahtlos in Ihren Workflow einfügt.

Multiple gradient types
Real-time preview
Custom color stops

Professional CSS output
Browser compatibility
Export options

Mehrere Verlaufsarten

Erstellen Sie lineare, radiale und konische Verläufe mit präziser Kontrolle über Richtung, Form und Farbverteilung – für jede gestalterische Anforderung.

Echtzeit-Vorschau

Sehen Sie jede Änderung sofort in der Live-Vorschau. Passen Sie Farben, Positionen und Winkel an und erhalten Sie unmittelbar visuelles Feedback.

Professioneller CSS-Code

Erzeugen Sie sauberen, optimierten CSS-Code mit Browser-Präfixen und Ausweichwerten für maximale Kompatibilität in allen modernen Browsern.

Ideal für:

Website backgrounds
Button designs
Card components

Hero sections
Mobile app designs
UI element styling

So funktioniert's:

Verlaufsart wählen

Wählen Sie je nach Anforderung zwischen linearem, radialem oder konischem Verlauf.

Farben & Einstellungen anpassen

Fügen Sie Farbstopps hinzu, justieren Sie Winkel und Positionen und verfeinern Sie die Übergänge mit Echtzeitvorschau.

CSS-Code kopieren

Erhalten Sie optimierten CSS-Code samt Browser-Präfixen, sofort einsatzbereit für Ihre Webprojekte.

Häufige Fragen

Lineare Verläufe verlaufen geradlinig von einer Farbe zur nächsten – ideal für Hintergründe und Schaltflächen. Radiale Verläufe strahlen von einem Mittelpunkt nach außen und eignen sich für Spotlight-Effekte. Konische Verläufe drehen sich wie ein Farbrad um einen Mittelpunkt und sind perfekt für Ladeanimationen und kreative Designs.

Klicken Sie auf „Farbstopp hinzufügen“, um weitere Farben aufzunehmen. Jeden Farbstopp können Sie an einer bestimmten Position im Verlauf platzieren und einzeln einfärben. Über die Schaltfläche neben der Farbe entfernen Sie einen Stopp wieder.

Ja! Unser Generator erzeugt CSS mit allen nötigen Browser-Präfixen (-webkit-, -moz-, -o-) und Ausweichwerten für ältere Browser. Der Code funktioniert in allen modernen Browsern und degradiert bei älteren sauber.

Selbstverständlich! Kopieren Sie den erzeugten CSS-Code direkt, exportieren Sie ihn als CSS-Datei oder sichern Sie Ihre Einstellungen als JSON für später. Außerdem können Sie Verlaufsbilder in verschiedenen Formaten erzeugen, etwa für Grafikprogramme oder Präsentationen.

Bei linearen Verläufen stellen Sie den Winkel per Regler oder Eingabefeld exakt ein (0-360°). Alternativ nutzen Sie Voreinstellungen wie „nach oben“, „nach unten“ oder „nach rechts“. Bei radialen Verläufen passen Sie über Position und Form den Mittelpunkt und die Ausdehnung an.

Halten Sie Hintergrundverläufe dezent, damit sie den Inhalt nicht erdrücken. Achten Sie auf ausreichenden Kontrast für die Lesbarkeit von Text und hinterlegen Sie aus Gründen der Barrierefreiheit einfarbige Ausweichwerte. Setzen Sie Verläufe im gesamten Designsystem konsistent ein und testen Sie das Ergebnis auf verschiedenen Geräten und Bildschirmgrößen.