BilderKostenlos · 3 Nutzungen/TagIm Browser verarbeitet
CSS-Verlaufsgenerator
Erstellen Sie lineare, radiale und konische Verläufe visuell und exportieren Sie sie als CSS oder Tailwind.
Typ
linear
Stops
3/8
Export
CSS + Tailwind
Mesh
Mesh aktiv
01
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%)]
02
Stops und Komposition
Farbstops
#8C6A2D
0% · 100%
Position
Deckkraft
#D3B06F
52% · 96%
Position
Deckkraft
#2B1D08
100% · 100%
Position
Deckkraft
03
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.
04
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%);
}
Verwandte
Mehr aus dieser Kategorie
Da mesma categoria.
Kostenlos · 2 Nutzungen/Tag
Wasserzeichen im Stapel
Setzen Sie ein Logo oder einen Text als Wasserzeichen auf mehrere Fotos gleichzeitig und laden Sie alles als ZIP herunter.
Kostenlos · 3 Nutzungen/Tag
Moodboard
Kombinieren Sie Bild-URLs, eine Hex-Palette und Stichwörter in einem exportierbaren visuellen Raster.
Kostenlos · 1 Nutzung/Tag
KI-Hintergrundentferner
Stellt Fotos mit einem KI-Modell frei, das in Ihrem Browser läuft. Funktioniert am besten mit Personen und Produkten im Vordergrund.
Kostenlos · 2 Nutzungen/Tag
Farbpaletten-Generator
Geben Sie eine Grundfarbe ein und erzeugen Sie harmonische Schemata (analog, monochrom, komplementär).
Kostenlos · 3 Nutzungen/Tag
WCAG-Kontrastprüfer
Prüfen Sie Farbkontrast und WCAG-AA/AAA-Konformität, mit Vorschau und Export.
Kostenlos · 3 Nutzungen/Tag
EXIF-Viewer
Sehen Sie Bildmetadaten: GPS, Kamera, Aufnahmedatum und mehr.