BilderProcessado no seu navegador

CSS-Verlaufsgenerator

Erstellen Sie visuell lineare, radiale und konische Verläufe und exportieren Sie sie sofort als CSS oder Tailwind.

0 von 3 Nutzungen heute · 3 übrig. Werde Pro und entferne das Limit.

Upgrade

Typ

linear

Stops

3/8

Export

CSS + Tailwind

Mesh

Mesh aktiv

Vorschau und Code

Basisfarben

Farbe 01

#8C6A2D

Anfängliche Basis des Gradienten.

Farbe 02

#D3B06F

Endgültige Basis des Gradienten.

CSS

background: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%);

Tailwind

bg-[radial-gradient(circle_at_28%_24%,_rgba(243,_223,_178,_0.2)_0%,_rgba(243,_223,_178,_0)_34%),_radial-gradient(circle_at_78%_68%,_rgba(192,_141,_59,_0.18)_0%,_rgba(192,_141,_59,_0)_42%),_linear-gradient(135deg,_#8C6A2D_0%,_rgba(211,_176,_111,_0.96)_52%,_#2B1D08_100%)]

Stops und Komposition

Farbstops

#8C6A2D

0% · 100%

Position

Deckkraft

#D3B06F

52% · 96%

Position

Deckkraft

#2B1D08

100% · 100%

Position

Deckkraft

Geometrie

Typ und Richtung

Typ

Winkel

135°

Zentrum und Optionen

Zentrum X

50%

Zentrum Y

50%

Wiederholend

Nützliche Kadenz für Trenner, Gewebe und Produktlinien.

Erweiterte Ausgaben

Mesh-Overlay

Overlay für visuellen Hero und Flächen mit Tiefe.

2 Ebenen

background: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%);

Token-Paket

CSV mit Hero, Surface und Accent bereit zur Implementierung.

:root { --gradient-stop-1: #8C6A2D; --gradient-stop-2: #D3B06F; --gradient-stop-3: #2B1D08; --gradient-css: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%); }

§ So verwenden

So erstellen Sie einen CSS-Verlauf visuell

Erstellen Sie lineare, radiale oder konische Verläufe mit Live-Vorschau und exportieren Sie fertiges CSS zum Einfügen.

Verlaufstyp wählen
Linear (am häufigsten, gerichtete Übergänge), Radial (von der Mitte nach außen) oder Konisch (im Bogen — ideal für Diagramme).
Farben und Stopps festlegen
Fügen Sie zwei oder mehr Farben hinzu. Ziehen Sie, um die Position jedes Stopps zu ändern. Farben in HEX, RGB oder HSL.
Winkel oder Zentrum anpassen
Linear: 0deg (vertikal), 90deg (horizontal), 45deg (diagonal). Radial: Ursprung in Pixeln oder % festlegen.
CSS kopieren
Code zum Einfügen in Ihr Stylesheet, mit -webkit/-moz-Präfixen für maximale Kompatibilität.

Verwandte

CSS-Verlaufsgenerator