CSS-Gradient-Generator
Erstellen Sie visuell atemberaubende CSS-Gradienten. Generieren Sie lineare, radiale und konische Gradienten mit mehreren Farbstops, Winkeln und Positionen. Kopieren Sie produktionsreifen CSS-Code sofort.
Was ist ein CSS-Gradient?
Ein CSS-Gradient ist ein CSS-Bildwert, der fließende Übergänge zwischen zwei oder mehr Farben ohne Bilddateien anzeigt. Gradienten werden vom Browser gerendert und sind dadurch auflösungsunabhängig und sehr leistungsfähig.
Welche CSS-Gradient-Typen werden unterstützt?
Dieser Generator unterstützt drei Typen: linear-gradient (Farben entlang einer geraden Linie), radial-gradient (Farben strahlen vom Mittelpunkt) und conic-gradient (Farben rotieren um einen Mittelpunkt wie ein Zifferblatt).
Was ist der Unterschied zwischen linearen und radialen Gradienten?
Lineare Gradienten übergehen Farben entlang einer geraden Linie, definiert durch Winkel oder Richtungsschlüsselwort. Radiale Gradienten übergehen Farben von einem Mittelpunkt nach außen in kreisförmigen oder elliptischen Formen.
Wie viele Farbstops kann ich verwenden?
Sie können beliebig viele Farbstops verwenden. Jeder Stop definiert eine Farbe und optional eine Position (0% bis 100%) entlang der Gradientenlinie. Mehrere Stops erzeugen komplexe mehrfarbige Übergänge.
Wie verwende ich den generierten CSS-Code?
Kopieren Sie den generierten CSS-Code und fügen Sie ihn als Wert für background oder background-image in Ihrem CSS-Stylesheet ein. Der Code funktioniert in allen modernen Browsern.
Was sind Farbstops in Gradienten?
Farbstops definieren bestimmte Farben an bestimmten Positionen entlang der Gradientenlinie. Zum Beispiel erstellt "red 0%, blue 50%, green 100%" einen Gradienten, der rot beginnt, in der Mitte zu blau übergeht und grün endet.
Kann ich Gradienten mit Winkeln erstellen?
Ja, lineare Gradienten unterstützen Winkelwerte von 0deg bis 360deg. Sie können auch Richtungsschlüsselwörter wie "to right", "to bottom", "to top left" verwenden.
Sind CSS-Gradienten responsiv?
Ja, CSS-Gradienten sind inhärent responsiv, da sie vektorbasiert sind und vom Browser gerendert werden. Sie skalieren perfekt auf jede Containergröße ohne Qualitätsverlust oder Dateigrößenzunahme.
Beeinflussen CSS-Gradienten die Seitenleistung?
CSS-Gradienten sind im Allgemeinen sehr leistungsfähig. Sie eliminieren HTTP-Anfragen für Bilddateien und werden hardwarebeschleunigt. Allerdings können extrem komplexe Gradienten die Rendering-Leistung auf leistungsschwachen Geräten beeinträchtigen.
Kann ich Gradienten für Hintergründe und Ränder verwenden?
Ja, Gradienten können für background-image, border-image, mask-image und jede Eigenschaft verwendet werden, die CSS-Bildwerte akzeptiert. Sie funktionieren überall, wo ein Bildwert erwartet wird.
Welche Browser unterstützen CSS-Gradienten?
Alle modernen Browser unterstützen CSS-Gradienten, einschließlich Chrome, Firefox, Safari, Edge und Opera. Die Unterstützung ist seit IE10 ausgezeichnet. Herstellerpräfixe werden nicht mehr benötigt.
Wie erstelle ich einen wiederholenden Gradienten?
Verwenden Sie repeating-linear-gradient oder repeating-radial-gradient anstelle der Standardversionen. Diese wiederholen das Gradientenmuster, um das gesamte Element zu füllen, und erzeugen gestreifte oder gemusterte Effekte.
Kann ich CSS-Gradienten animieren?
CSS-Gradienten können nicht direkt mit CSS-Übergängen animiert werden. Sie können jedoch background-position, background-size animieren oder CSS-Custom-Properties mit @property für Gradientenanimationseffekte verwenden.
Ist dieser Gradient-Generator kostenlos?
Ja, dieser CSS-Gradient-Generator ist vollständig kostenlos. Keine Registrierung erforderlich, keine Nutzungseinschränkungen, und der gesamte generierte Code kann ohne Namensnennung in jedem Projekt verwendet werden.
So verwenden Sie CSS-Gradient-Generator
Stellen Sie CSS-Verläufe nach Augenmaß zusammen und kopieren Sie sofort produktionsreifen Code. Das Rendern erfolgt lokal in Ihrem Browser, ohne Uploads.
- Wählen Sie den Type des Verlaufs: linear-gradient oder radial-gradient.
- Legen Sie beim linearen Verlauf den Angle fest, oder wählen Sie beim radialen eine Shape wie circle oder ellipse.
- Fügen Sie im Bereich Color Stops Farbstopps hinzu, färben Sie sie um und verschieben Sie sie.
- Klicken Sie unter Presets auf eine Farbpalette, um mit einem fertigen Verlauf zu starten.
- Kopieren Sie den erzeugten CSS-Code und fügen Sie ihn in Ihr Stylesheet ein.
Zwei Farbstopps unterschiedlicher Farben an derselben Position ergeben eine harte Kante — so bauen Sie schnell Streifen ohne Bilder.
Verwandte Tools
- CSS Box Shadow Generator Kostenloser Online-CSS-Box-Shadow-Generator. Erstellen Sie visuell schöne Schatten mit einstellbarem Versatz, Unschärfe, Ausbreitung, Farbe und Inset. Live-Vorschau und sofortiges Code-Kopieren.
- CSS Border Radius Generator Visueller CSS Border Radius Generator. Passen Sie jede Ecke unabhängig an mit Echtzeitvorschau und kopieren Sie den CSS-Code sofort.
- CSS Grid Generator Kostenloser visueller CSS Grid Generator mit Live-Vorschau. Gestalten Sie responsive Grid-Layouts interaktiv und exportieren Sie produktionsreifen CSS-Code.
- CSS Flexbox-Generator Visueller CSS Flexbox-Generator mit Live-Vorschau. Passen Sie Flex-Eigenschaften an und erhalten Sie sofort einsatzbereiten CSS-Code.
- Border Radius Generator Kostenloser Online Border-Radius-Generator. Ziehen Sie 8 Griffe oder wählen Sie eine Blob-Vorlage, um organische CSS-Formen zu erstellen und den Code sofort zu kopieren.
- Farbkonverter Kostenloser Online-Farbkonverter. Konvertieren Sie HEX, RGB, HSL, HSV Formate sofort mit visueller Farbauswahl. 100% privat, läuft in Ihrem Browser.
- CSS Easing Generator Kostenloser Online-CSS-Easing-Generator. Ziehen Sie die cubic-bezier-Kontrollpunkte auf einer interaktiven Kurve, wählen Sie aus 18 Vorlagen, sehen Sie eine Ball-Loop-Animation und kopieren Sie die Timing-Funktion sofort.
- CSS Text-Shadow-Generator Kostenloser Online-Text-Shadow-Generator. Stapeln Sie mehrere Schattenebenen mit Versatz, Unschärfe, Farbe und Deckkraft, testen Sie Vorlagen wie Neon, 3D oder Retro und kopieren Sie das CSS sofort.