Herramienta CSS · Gratis
Generador de degradados CSS
Degradados lineales, radiales y cónicos — 100 % en el navegador.
3 types
Live preview
100% local
Volade Tools
Generador de degradados CSS
Sin cuentav1.0.0
Gradient type
Direction & angle
90°
Color stops (3/8)
0%
50%
100%
Preset library
Generador degradados CSS: guía completa
Linear, radial, conic — paste-ready code, no upload.
Desarrolladores, diseñadores UI, integradores WordPress y equipos marketing crean degradados CSS decenas de veces por semana — hero a pantalla completa, botones CTA, tarjetas producto, loaders animados, fondos dashboard y overlays de marca. Volade combina editor visual tiempo real, brújula ocho puntos, cursor ángulo 0–360°, editor 2–8 paradas, doce presets editables, generador aleatorio inspiración y CSS exportable listo para producción — enteramente en el navegador, sin registro para generar y previsualizar en vivo.
Why this tool
Porque generadores existentes suelen limitarse a lineal simple, omiten conic-gradient crucial para loaders, muestran anuncios intrusivos o envían hex al servidor. Volade ofrece tres funciones CSS estándar, brújula visual, hasta ocho paradas y 100 % cliente.
«El cónico me salvó un loader de branding — raro gratis en otros sitios. Copia CSS limpia en V+ para Slack y Jira sin retoque de marca de agua.»
Thomas R.
Desarrollador front-end
«Presets más brújula: mis mockups hero pasan a CSS en dos clics — ahorra rondas de revisión con el equipo diseño.»
Sophie L.
Diseñadora UI/UX
«Lo recomiendo a estudiantes — sintaxis correcta, vista previa instantánea, cero anuncios y procesamiento totalmente local.»
Prof. Claire D.
Profesora web
Linear, radial or conic?
Lineal sigue dirección — ideal fondos, hero banners y superficies CTA. Radial desde centro — spotlight, viñetas y overlays sobre fotos. Cónico alrededor de punto — loaders, gráficos donut, efectos artísticos y animaciones de marca poco comunes en herramientas gratis.
Volade permite cambiar tipo conservando paradas de color y posiciones porcentuales. Vista previa a panel completo y código background: linear-gradient(), radial-gradient() o conic-gradient() se recalculan en cada pulsación, arrastre de cursor o clic preset — incluso offline tras cargar, verificable cortando red en DevTools tras el primer 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
Elija tipo, ajuste dirección y paradas, copie CSS. Todo en JavaScript nativo — sin backend ni registro para generar.
In 4 steps
- 1
Elija tipo
Lineal, radial o cónico — cargue preset o empiece desde cero.
- 2
Dirección y paradas
Brújula o cursor ángulo, 2–8 colores con porcentajes de posición afinados.
- 3
Revise vista previa
Render a pantalla completa y contraste del texto encima en layout real.
- 4
Copie CSS
Pegue en stylesheet — V+ para export sin marca e historial de cien entradas.
Use cases
Cuándo CSS vence a la imagen — hero, botones, loaders y dashboards sin pipeline de assets pesada ni export Retina.
1
Hero y landing
Fondos linear-gradient a ancho completo con dos a cuatro paradas — escalan a 4K sin PNG extra y animan con @keyframes.
2
CTA y botones
Degradados radiales para estados hover y acentos cónicos en iconos — pocas líneas CSS en lugar de sprite sheets.
3
Loader y dataviz
conic-gradient para spinners y segmentos donut — raro en gratis, aquí con vista previa live y código copiable.
4
Design system
Presets como base de tokens, export V+ sin marca para Slack, Jira y commits en stylesheet.
Volade vs online generators
Comparado con CSSGradient.io, GradientGen, ColorSpace y WebGradients en tipos, paradas, brújula, offline e historial.
Volade lidera en tripleta lineal + radial + cónico en un editor, brújula direccional nativa, paradas hasta ocho colores, modo offline completo e historial local por nivel invitado / conectado / V+. Competidores útiles para galerías estáticas; Volade para workflow iterativo dev/diseño con copy-paste diario.
Tres tipos, cero servidor
El generador CSS degradado más completo en local — cónico incluido, offline verificable.
| 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
Editor completo, presets y aleatorio gratis. V+ quita marca en copia/export y extiende historial a 100 degradados.
| Función | Gratis | 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 cubre la mayoría mockups e integraciones front diarias — lineal, radial, cónico, presets y copia CSS incluidos. V+ para equipos diseño y freelancers con decenas de degradados cliente: export archivo sin marca, historial cien entradas.
Your colors never leave the browser
Generación CSS se ejecuta enteramente en JavaScript en su pestaña: cero POST, cero upload paleta, cero tracking de colores elegidos. Historial para cuentas conectadas guarda solo código CSS truncado en localStorage — borrable en un clic. DevTools → Network al mover paradas: cero red para recalcular linear-gradient o conic-gradient.
Pro gradient tips
Menos colores, más impacto — y pruebe contraste del texto encima.
- Posiciones irregulares — bandas netas o transiciones suaves
- Superposición — varios background-image para efectos mesh
- Animación — @keyframes en ángulo o background-size
- RGBA / HSLA — degradados semitransparentes sobre fotos
- Fallback — background-color sólido antes del gradient
- Export V+ — archive tokens hero sin marca
Pruebe conic-gradient en su audiencia — CanIUse para Safari antiguo.
Did you know?
2011year CSS gradients landed in Chrome
~0 KBCSS gradient vs PNG weight
3types: linear, radial, conic
FAQ
Diez respuestas detalladas sobre linear-gradient, radial-gradient, conic-gradient, paradas 2–8, brújula, doce presets, generador aleatorio, copia con/sin marca, export archivo V+, historial local 10/100 y comparación con CSSGradient.io, GradientGen, ColorSpace y WebGradients.
No. El CSS se calcula enteramente en JavaScript en su navegador en cada cambio de color, ángulo o parada. Ni linear-gradient ni radial-gradient ni conic-gradient disparan peticiones de red — sus valores hex y porcentajes de posición permanecen locales.
Verifique en DevTools → Network: cero subida mientras mueve paradas o carga presets. El historial de cuentas conectadas guarda código CSS truncado en localStorage en su dispositivo — borrable, sin sync servidor ni backup en nube de sus experimentos de diseño.
V+ Premium
Your pro gradient library
Watermark-free CSS export, 100-entry history.
Cancel anytime.
Related
Last updated: July 2026. Sources: MDN, CanIUse, W3C.