CSS-Tool · Kostenlos
CSS-Verlauf Generator
Lineare, radiale und konische Verläufe — 100 % im Browser.
3 types
Live preview
100% local
Volade Tools
CSS-Verlauf Generator
Gastv1.0.0
Gradient type
Direction & angle
90°
Color stops (3/8)
0%
50%
100%
Preset library
CSS-Verlauf Generator: Leitfaden
Linear, radial, conic — paste-ready code, no upload.
Entwickler, UI-Designer, WordPress-Integratoren und Marketing-Teams erstellen CSS-Verläufe dutzende Male pro Woche — Hero-Sections, CTA-Buttons, Produktkarten, animierte Loader, Dashboard-Hintergründe und Branding-Overlays. Volade kombiniert Echtzeit-Editor, Achtpunkte-Kompass, Winkel-Slider 0–360°, Editor für 2–8 Farbstopps, zwölf editierbare Presets, Zufallsgenerator für Inspiration und exportierbaren Produktions-CSS — vollständig im Browser, ohne Registrierung zum Generieren und Live-Vorschauen.
Why this tool
Weil bestehende Generatoren oft nur simples Linear bieten, conic-gradient für Loader fehlt, Werbung stört oder Hex-Codes an Server gehen. Volade liefert drei CSS-Standardfunktionen, visuelle Kompass, bis acht Stopps und 100 % Client.
«Conic hat mir einen Branding-Loader gerettet — selten gratis anderswo. Saubere CSS-Kopie in V+ für Slack und Jira ohne Wasserzeichen-Nachbearbeitung.»
Thomas R.
Front-End-Entwickler
«Presets plus Kompass: meine Hero-Mockups werden in zwei Klicks zu CSS — spart Review-Runden mit dem Design-Team.»
Sophie L.
UI/UX-Designerin
«Empfehle es Studierenden — korrekte Syntax, sofortige Vorschau, null Werbung und vollständig lokale Verarbeitung.»
Prof. Claire D.
Web-Dozentin
Linear, radial or conic?
Linear folgt einer Richtung — ideal für Hintergründe, Hero-Banner und CTA-Flächen. Radial vom Zentrum — Spotlight, Vignetten und Overlays auf Fotos. Conic um einen Punkt — Loader, Donut-Charts, künstlerische Effekte und Marken-Animationen, die selten in Gratis-Tools vorkommen.
Volade lässt den Typ wechseln, während Farbstopps und Prozentpositionen erhalten bleiben. Vollbild-Vorschau und background: linear-gradient(), radial-gradient() oder conic-gradient() werden bei jedem Tastendruck, Slider-Griff oder Preset-Klick neu berechnet — auch offline nach dem Laden, verifizierbar durch Netzwerk-Trennung in DevTools nach dem ersten Render.
Best practices
- 2–3 colors often enough for UI
- 135° or 45° — natural diagonals
- Fallback — solid color before gradient
- Conic — check browser support
- 100% local — colors stay private
How to use the generator
Typ wählen, Richtung und Stopps setzen, CSS kopieren. Alles in nativem JavaScript — kein Backend, keine Registrierung zum Generieren.
In 4 steps
- 1
Typ wählen
Linear, radial oder conic — Preset laden oder bei null anfangen.
- 2
Richtung & Stopps
Kompass oder Winkel-Slider, 2–8 Farben mit Positionsprozenten feinjustieren.
- 3
Vorschau prüfen
Vollflächen-Render und Kontrast des darüberliegenden Textes im echten Layout testen.
- 4
CSS kopieren
In Stylesheet einfügen — V+ für Export ohne Wasserzeichen und Verlauf mit 100 Einträgen.
Use cases
Wann CSS das Bild schlägt — Hero, Buttons, Loader und Dashboards ohne schwere Asset-Pipeline oder Retina-Export.
1
Hero & Landing
Vollbreite linear-gradient-Hintergründe mit zwei bis vier Stopps — skalieren auf 4K ohne zusätzliche PNG-Assets und lassen sich per @keyframes animieren.
2
CTA & Buttons
Radiale Verläufe für Hover-States und conische Akzente auf Icons — wenige Zeilen CSS statt Sprite-Sheets.
3
Loader & Dataviz
conic-gradient für Spinner und Donut-Segmente — selten in Gratis-Tools, hier mit Live-Vorschau und kopierbarem Code.
4
Design System
Presets als Token-Startpunkt, V+ Export ohne Wasserzeichen für Slack, Jira und Stylesheet-Commits.
Volade vs online generators
Verglichen mit CSSGradient.io, GradientGen, ColorSpace und WebGradients zu Typen, Stopps, Kompass, Offline und Verlauf.
Volade führt bei linear + radial + conic in einem Editor, nativer Richtungs-Kompass, Stopps bis acht Farben, vollem Offline-Modus und lokalem Verlauf (10/100). Konkurrenten für statische Galerien nützlich; Volade für iteratives Dev/Design mit täglichem Copy-Paste.
Drei Typen, null Server
Der vollständigste lokale CSS-Verlauf-Generator — conic inklusive, offline verifizierbar.
| Criterion | Volade | CSSGradient.io | GradientGen | ColorSpace | WebGradients |
|---|---|---|---|---|---|
| Linéaire + radial + conique | Oui | Partiel | Oui | Partiel | Non |
| Boussole directionnelle | Oui | Oui | Non | Non | Non |
| 2–8 arrêts ajustables | Oui | Oui | 4 max | Oui | Non |
| Presets modifiables | Oui | Oui | Oui | Partiel | Statique |
| Générateur aléatoire | Oui | Oui | Non | Non | Non |
| 100 % client | Oui | Partiel | Non | Partiel | Oui |
| Historique 10 / 100 | Oui | Non | Non | Non | Non |
Indicative — July 2026.
Volade for linear, radial and conic without compromise.
Features by plan
Voller Editor, Presets und Zufall sind gratis. V+ entfernt Wasserzeichen auf Kopie/Export und erweitert Verlauf auf 100 Verläufe.
| Funktion | Kostenlos | V+ Premium |
|---|---|---|
| Linéaire, radial et conique | ||
| Boussole directionnelle | ||
| Curseur angle 0–360° | ||
| Éditeur 2–8 arrêts | ||
| Forme cercle / ellipse (radial) | ||
| Tailles cover / contain | ||
| 12 presets modifiables | ||
| Générateur aléatoire | ||
| Copie CSS | Sans filigrane | |
| Export fichier CSS | — | |
| Historique dégradés | 10 | 100 |
| 100 % local |
Gratis deckt die meisten Alltags-Mockups und Front-Integrationen — linear, radial, conic, Presets und CSS-Kopie inklusive. V+ für Design-Teams und Freelancer mit dutzenden Kunden-Verläufen: Datei-Export ohne Wasserzeichen, Verlauf mit 100 Einträgen.
Your colors never leave the browser
CSS-Generierung läuft vollständig in JavaScript im Tab: null POST, null Palette-Upload, kein Tracking gewählter Farben. Verlauf für angemeldete Konten speichert nur gekürzten CSS-Code in localStorage — mit einem Klick löschbar. DevTools → Network beim Verschieben der Stopps: null Netzwerk für linear-gradient oder conic-gradient.
Pro gradient tips
Weniger Farben, mehr Wirkung — und Textkontrast darüber testen.
- Unregelmäßige Positionen — harte Bänder oder weiche Übergänge
- Überlagerung — mehrere background-image für Mesh-Effekte
- Animation — @keyframes auf Winkel oder background-size
- RGBA / HSLA — halbtransparente Verläufe über Fotos
- Fallback — background-color vor gradient
- V+ Export — Hero-Tokens ohne Wasserzeichen archivieren
conic-gradient auf Zielgruppe testen — CanIUse für älteres Safari beachten.
Did you know?
2011year CSS gradients landed in Chrome
~0 KBCSS gradient vs PNG weight
3types: linear, radial, conic
FAQ
Zehn ausführliche Antworten zu linear-gradient, radial-gradient, conic-gradient, Stopps 2–8, Kompass, zwölf Presets, Zufallsgenerator, Kopie mit/ohne Wasserzeichen, V+ Datei-Export, lokalem Verlauf 10/100 und Vergleich mit CSSGradient.io, GradientGen, ColorSpace und WebGradients.
Nein. Das CSS wird bei jeder Änderung von Farbe, Winkel oder Stopp vollständig in JavaScript in Ihrem Browser berechnet. Weder linear-gradient noch radial-gradient oder conic-gradient lösen Netzwerk-Anfragen aus — Ihre Hex-Werte und Positionsprozente bleiben lokal.
Prüfen Sie in DevTools → Network: null Upload während Sie Stopps verschieben oder Presets laden. Der Verlauf angemeldeter Konten speichert gekürzten CSS-Code in localStorage auf Ihrem Gerät — löschbar, ohne Server-Sync oder Cloud-Backup Ihrer Design-Experimente.
V+ Premium
Your pro gradient library
Watermark-free CSS export, 100-entry history.
Cancel anytime.
Related
Last updated: July 2026. Sources: MDN, CanIUse, W3C.