Ir para o conteúdo principal
Bilder

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

CSS-Gradienten-Generator

CSS-GradientLinear, radial und konischGeräteinterne Verarbeitung

Justieren Sie die Richtung, verteilen Sie die Stops und liefern Sie einen Gradienten bereit für Produkt, Landing oder Design-System.

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%); }
Sobre

Was ist der CSS-Gradienten-Generator?

Por Quorify EditorialAtualizado em

Der CSS-Gradienten-Generator von Quorify erstellt lineare, radiale und konische Gradienten visuell und exportiert sie sofort als CSS oder Tailwind. Die Verarbeitung erfolgt lokal in Ihrem Browser über die Canvas API und standardisierte Formate – nützlich, wenn Sie mit sensiblen Bildern (Reisepass, Vertrag, interner Screenshot) arbeiten und es vorziehen, nicht auf einen externen Server hochzuladen. Es unterstützt moderne Formate (JPEG, PNG, WebP, AVIF) gemäß ISO/IEC-Standards. Teil des Bildbearbeitungs-Kits von Quorify – kombinieren Sie es mit anderen Komprimierungs-, Konvertierungs- und visuellen Bearbeitungswerkzeugen. Einzelheiten zur Datenverarbeitung finden Sie in unserer Datenschutzerklärung.

Casos

Wann es verwendet wird

  1. Vorbereitung eines Bildes vor dem Upload auf eine Website, einen E-Commerce oder ein soziales Netzwerk.

  2. Beschleunigung der Arbeit von Freelance-Designern bei sich wiederholenden Aufgaben (Stapelgröße ändern, Formatkonvertierung).

  3. Bearbeitung von Screenshots für technische Dokumentation oder Tutorials, ohne einen schweren Editor zu öffnen.

  4. Vorbereitung von Marketingmaterial – Banner, Post, Thumbnail – in optimiertem Format.

  5. Lösung einer schnellen Aufgabe ohne Installation von Photoshop oder ähnlichem.

Método

Wie es funktioniert

Der CSS-Gradienten-Generator verwendet die Canvas API und die nativen Bild-Codecs des Browsers, die ISO/IEC-Standards für JPEG, PNG, WebP und AVIF implementieren. Die Verarbeitung ist lokal – das Bild wird nicht an einen externen Server gesendet. Vollständige Details zur Datenverarbeitung finden Sie in unserer Datenschutzerklärung.

FAQ

Häufig gestellte Fragen

Wird das Bild an einen Server gesendet?
Nein. Der CSS-Gradienten-Generator verarbeitet das Bild lokal im Browser über die Canvas API. Vollständige Details zur Datenverarbeitung finden Sie in unserer Datenschutzerklärung.
Welche Formate werden unterstützt?
Die wichtigsten Webformate (JPEG, PNG, WebP, AVIF). Die Unterstützung für Legacy-Formate (BMP, TIFF) kann je nach Browser variieren.
Gibt es eine Größenbeschränkung?
Die Verarbeitung hängt vom Browser-Speicher ab. Sehr große Bilder (über 50 MB) können die Seite verlangsamen. Wir empfehlen bei Bedarf zuerst zu komprimieren.
Wird die Qualität erhalten?
Verlustfreie Konvertierungen bewahren die volle Qualität. Komprimierte Konvertierungen (JPEG, WebP) folgen dem gewählten Level – es gibt immer einen Kompromiss zwischen Größe und Qualität.
Funktioniert es auf Mobilgeräten?
Ja, in modernen Browsern. Sehr große Bilder können durch den Speicher des Mobilgeräts begrenzt sein.
Kann ich mehrere Bilder verarbeiten?
Einige Tools unterstützen Stapelverarbeitung. Sehen Sie sich die spezifische Tool-Oberfläche an, um dies zu bestätigen.
Fontes

Offizielle Quellen

Tabelas, leis e referências consultadas para fundamentar esta ferramenta.

  1. Internationale StandardsISO/IEC Serie 14496/15444ISO/IEC JTC1 SC29

    Bild- und Videoformat-Spezifikationen

    Internationale Standards für Kodierung und Austausch von Bildern (JPEG, PNG, WebP, AVIF) und Video – Referenz für Browser und Bearbeitungssoftware.

    Consultar fonte oficial
  2. Offizielle DokumentationAktuellGoogle Web Dev

    Web Image Best Practices

    Google-Empfehlungen zur Bildoptimierung für das Web – moderne Formate, Lazy Loading, Dimensionierung und Auswirkungen auf Core Web Vitals.

    Consultar fonte oficial
  3. IndustriestandardExif 2.32CIPA · Camera & Imaging Products Association

    Exif-Spezifikation

    Exif-Metadatenstandard (Exchangeable Image File Format), der von Digitalkameras und Smartphones zur Speicherung von Aufnahmeinformationen verwendet wird.

    Consultar fonte oficial

Metodologia — esta ferramenta consulta as tabelas e legislação vigentes nas fontes acima. As regras são atualizadas conforme novas instruções normativas são publicadas pelos órgãos competentes.

Última verificação editorial: junho de 2026.

GesponsertQuorify · Free-Tarif
Quorify Pro

Quorify ohne Limits nutzen

100 Nutzungen/Tag für alle 125 Tools · werbefrei · unbegrenzte Historie

Ab$4.08/mo
Tarife ansehen
Compartilhe
GesponsertQuorify · Free-Tarif
Quorify Pro

Quorify ohne Limits nutzen

100 Nutzungen/Tag für alle 125 Tools · werbefrei · unbegrenzte Historie

Ab$4.08/mo
Tarife ansehen

Verwandte

Verwandte Werkzeuge

toolLayout.related_description

Max

AI-Hintergrundentferner

Künstliche Intelligenz, die den Hintergrund aus jedem Bild perfekt ausschneidet und entfernt.

Pro

Batch-Wasserzeichen

Beschleunigen Sie das Hochladen von Immobilien, indem Sie Wasserzeichen, Logos und Lizenzen auf bis zu 50 Fotos gleichzeitig anwenden. Auspacken.

Pro

Bildkonverter

Ändern Sie die Größe von Bildern und konvertieren Sie sie global, ohne an Qualität zu verlieren.

Max

Bildkompressor

Reduzieren Sie das Gewicht Ihrer Bilder drastisch und bewahren Sie dabei die visuelle Qualität.

Pro

Exakter Resizer

Passen Sie die genaue Pixelbreite oder -höhe jedes Bildes an.

Pro

Massenbild-Resizer

Konvertieren Sie Dutzende Bilder gleichzeitig und ändern Sie ihre Größe direkt in Ihrem Browser mit 100 % Privatsphäre.