Generador de Gradientes CSS
Crea degradados lineales, radiales y cónicos visualmente. Añade paradas de color, elige presets, exporta como CSS, configuración de Tailwind o SVG. Descarga como PNG 1920×1080.
Presets
Generador de degradados CSS — crea degradados hermosos visualmente
Los degradados CSS han reemplazado a las imágenes en la mayoría de tareas de diseño de fondo — son independientes de la resolución, cargan al instante y se pueden animar. Este generador te ofrece un editor visual para los tres tipos de degradados CSS con vista previa en vivo y salida lista para copiar en CSS, Tailwind CSS y SVG.
Tres tipos de degradado
- Degradado lineal — hace transición de colores a lo largo de una línea recta. Controla el ángulo (0°–360°). El más común para fondos hero, tarjetas y botones.
- Degradado radial — hace transición de colores hacia afuera desde un punto central. Crea efectos de foco o brillo circular.
- Degradado cónico — hace transición de colores alrededor de un punto central como una rueda de colores. Útil para gráficos de tarta e indicadores de progreso.
Formatos de exportación
- CSS — la propiedad estándar
background, lista para pegar en cualquier hoja de estilos. - Tailwind CSS — usa la sintaxis de valor arbitrario:
bg-[linear-gradient(...)]. - SVG — un SVG autocontenido con una definición de linearGradient.
- Descarga PNG — renderiza el degradado en un canvas 1920×1080 y lo descarga como PNG. Útil para fondos de redes sociales e importaciones de Figma.
Casos de uso frecuentes
- Crear fondos llamativos de sección hero para páginas de aterrizaje.
- Generar efectos hover para botones y fondos de tarjetas.
- Construir progresiones de color de marca para presentaciones y redes sociales.
- Exportar fondos de pantalla con degradados para escritorio o móvil.
Preguntas Frecuentes
- ¿Qué tipos de degradados CSS puedo crear?
- Lineales, radiales y cónicos. El lineal transiciona colores a lo largo de una línea recta con ángulo ajustable. El radial transiciona hacia afuera desde un punto central. El cónico transiciona alrededor de un punto central como una rueda de colores.
- ¿Puedo copiar el código CSS directamente?
- Sí. Copia con un clic te da el código CSS completo del degradado listo para pegar en cualquier hoja de estilos. También puedes exportar como sintaxis de valor arbitrario de Tailwind CSS o SVG.
- ¿Soporta múltiples paradas de color?
- Sí. Añade tantas paradas de color como necesites con control total de posición. Cada parada puede ser cualquier color con una posición porcentual específica a lo largo del degradado.
- ¿Puedo exportar degradados como imágenes?
- Sí. Descarga tu degradado como imagen PNG de 1920x1080, perfecto para usar en herramientas de diseño como Figma, fondos de redes sociales o fondos de escritorio.
- ¿Este generador de degradados es gratis?
- Sí, completamente gratis sin limitaciones, sin registro requerido y sin marcas de agua en las imágenes exportadas.