Cuatro tipos de degradados
Crea fondos lineales, radiales o cónicos. Para una mezcla multipunto, superpón áreas radiales de color.
Generador de degradados
Crea un degradado, ajusta los colores y la dirección y copia el CSS. También puedes empezar con uno de los 60 modelos.
Elegir modo
Más acciones
Herramientas relacionadas
Tus estadísticas
0
Colores elegidos
0
Paletas exportadas
0
Degradados creados
0
Contrastes comprobados
Selector de color
Modo más usado
0%
Puntuación de actividad
Cómo crear un degradado CSS
No se ha podido cargar el vídeo. Puedes seguir las instrucciones que aparecen debajo.
El vídeo muestra la interfaz en inglés.
Lineal mezcla colores en línea recta, Radial desde un centro y Cónico alrededor de un centro. Elige Multipunto para varias áreas de color. Usa un modelo rápido para empezar con colores ya elegidos.
Crea un fondo con degradado CSS
60 modelos iniciales
Busca un modelo en la biblioteca y aplícalo. Después adapta los colores y sus posiciones a tu diseño.
Paradas y puntos de color
Los degradados lineales, radiales y cónicos admiten hasta seis paradas de color. Los multipunto permiten hasta diez puntos.
Mostrar 3 másMostrar menos
Código CSS y SCSS
Copia un fondo CSS o una variable SCSS. Tras cambiar la dirección o las posiciones, comprueba el resultado en tu hoja de estilos.
Límites de los formatos de exportación
Tailwind simplifica el degradado a uno lineal. SVG sustituye los diseños cónicos y multipunto por un degradado lineal. Por eso estos formatos pueden diferir de la vista previa.
Otras herramientas de color
El selector de modo abre páginas específicas para elegir colores, extraerlos de imágenes, crear paletas y comprobar el contraste.
Preguntas frecuentes
¿Cómo creo un degradado CSS?
Elige un tipo o modelo, ajusta los colores y sus posiciones y copia el fondo CSS. Pégalo en tu hoja de estilos y compruébalo en el navegador donde se usará tu diseño.
¿Qué tipos de degradados puedo crear?
Lineales, radiales, cónicos y multipunto. Las mezclas multipunto superponen degradados radiales sobre un color base, sin una función CSS específica para ese tipo.
¿Puedo crear degradados cónicos o de tipo malla?
Sí. Los degradados cónicos distribuyen los colores alrededor de un centro. Los multipunto superponen áreas radiales para crear un fondo de tipo malla. Usa CSS para conservar esos tipos.
¿Cuántas paradas o puntos puedo añadir?
Los degradados lineales, radiales y cónicos permiten hasta seis paradas de color. Los multipunto permiten hasta diez puntos. Puedes modificar el color y la posición de cada uno.
Mostrar 4 másMostrar menos
¿Todas las exportaciones coinciden con la vista previa?
Tailwind simplifica el diseño a un degradado lineal. SVG sustituye los degradados cónicos y multipunto por lineales. PNG y JPG tienen 1200 × 600 píxeles, por lo que sus proporciones y mezclas de color pueden diferir de la vista previa CSS. Usa CSS para conservar el tipo de degradado elegido.
¿Hay modelos listos para usar?
Sí. Explorar biblioteca abre una biblioteca con 60 modelos de los cuatro tipos. Puedes buscar uno, aplicarlo como punto de partida y editarlo.
¿El generador de degradados es gratuito?
Sí, MORELESS lo ofrece sin cuenta. Los cálculos y la generación de código se realizan en el navegador.
¿Cómo abro las otras herramientas de color?
Usa el selector de modo situado sobre los controles del degradado. Abre páginas específicas para elegir colores, extraerlos de imágenes, crear paletas y comprobar el contraste.
Detalles técnicos
Fondos CSS
El CSS usa linear-gradient(), radial-gradient() o conic-gradient() con los colores y sus posiciones. El motor CSS del navegador dibuja la vista previa. Comprueba el código copiado en tu hoja de estilos.
Mezclas multipunto
Un degradado multipunto superpone funciones radial-gradient() sobre un color base. Cada punto tiene un color y una posición en dos ejes. No existe una función CSS multipoint-gradient().
Mostrar 2 másMostrar menos
Límites de la exportación de código
SCSS guarda el degradado en una variable. Tailwind usa una dirección lineal simplificada y parte de los colores. SVG admite degradados lineales y radiales y sustituye los cónicos y multipunto por lineales.
Límites de la exportación de imágenes
PNG y JPG se generan con Canvas a 1200 × 600 píxeles, con los colores actuales y los ajustes disponibles de ángulo, centro o posición de puntos. Las proporciones fijas y la mezcla de colores pueden diferir de la vista previa CSS. La exportación de imágenes cónicas requiere que Canvas admita degradados cónicos.