La primera opción es una propiedad de estilo (linear-gradient, radial-gradient); la segunda, un nodo <svg> con su propio árbol XML. En todas las muestras de nuestra plataforma encontrarás pestañas dedicadas para exportar tanto en CSS Puro como en SVG Vector. Aquí te explicamos cuándo elegir cada uno.
Comparativa técnica: CSS Puro vs. SVG Vector
| Criterio | CSS Puro (linear / radial) | SVG Vector (<svg>) |
|---|---|---|
| Peso en el DOM | Mínimo (1 línea en la hoja de estilos) | Ligero (entre 0.5 KB y 3 KB de nodos XML) |
| Compatibilidad con Figma / Diseño | Requiere recrear las paradas manualmente | Importación directa (copiar y pegar) |
| Complejidad geométrica | Líneas rectas, elipses y círculos | Formas orgánicas, curvas Bézier y filtros de desenfoque (feGaussianBlur) |
| Animación y estados :hover | Fácil con variables CSS (@property) | Manipulable por coordenadas de nodos (cx, cy, r) |
Cuándo elegir CSS Puro
El código CSS nativo debe ser tu opción por defecto para el 90% de los componentes de interfaz (botones, fondos de sección, bordes iluminados y tarjetas):
- Cero peticiones de red adicionales: se descarga junto con tu hoja de estilos principal.
- Adaptabilidad automática: se ajusta de forma nativa a cualquier cambio de proporción del contenedor (
widthyheightdinámicos) sin deformarse.
.hero {
background: radial-gradient(circle at 50% 30%, #38bdf8 0%, #0284c7 35%, #1e3a8a 70%, #0f172a 100%);
}Cuándo elegir SVG Vector
Exportar desde la pestaña SVG Vector es la decisión superior en tres escenarios concretos:
- Flujo de trabajo directo con herramientas de diseño: si estás prototipando en Figma, Illustrator o Affinity, copiar el código SVG te permite pegarlo directamente en tu mesa de trabajo como un objeto vectorial editable con todas sus paradas de color intactas.
- Mesh Gradients orgánicos y desenfoques complejos: cuando una malla requiere filtros avanzados de mezcla o formas libres que van más allá de una elipse radial estándar.
- Activos descargables y Open Graph: si necesitas generar una portada estática, un fondo para redes sociales o un recurso que deba verse exactamente igual fuera del navegador.
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800" viewBox="0 0 1200 800">
<defs>
<radialGradient id="deep-ocean" cx="0.5" cy="0.3" r="0.86">
<stop offset="0%" stop-color="#38bdf8" />
<stop offset="35%" stop-color="#0284c7" />
<stop offset="70%" stop-color="#1e3a8a" />
<stop offset="100%" stop-color="#0f172a" />
</radialGradient>
</defs>
<rect width="100%" height="100%" fill="url(#deep-ocean)" />
</svg>Tanto si trabajas directamente en tu editor de código como si estás armando un sistema visual en tu software de diseño, puedes alternar entre ambos formatos en nuestras colecciones de Degradados CSS, Vectores SVG y Mesh Gradients.