Generador de degradados CSS
Añade puntos de color, elige lineal, radial o cónico, y copia el código CSS background terminado directamente en tu hoja de estilos. Empieza desde un preajuste o crea uno desde cero.
Preajustes
Tipo
Puntos de color
Vista previa
CSS
Preguntas frecuentes
¿Cuál es la diferencia entre degradado lineal, radial y cónico?
Un degradado lineal hace que los colores transiten a lo largo de una línea recta con un ángulo elegido (0° apunta hacia arriba, 90° hacia la derecha). Uno radial hace que los colores se irradien desde un punto central en forma de círculo o elipse. Uno cónico recorre los colores alrededor de un punto central como una rueda de color, empezando desde un ángulo elegido. Los tres son ampliamente compatibles en todos los navegadores modernos.
¿Cuántos puntos de color puedo añadir?
Todos los que quieras, cada uno con su propio color y posición (0-100%). La posición controla dónde se centra ese color a lo largo del degradado, lo que permite crear transiciones bruscas (puntos cercanos) o mezclas suaves (puntos separados).
¿Los preajustes me obligan a usar exactamente ese degradado?
No. Hacer clic en un preajuste solo carga su tipo, colores y puntos en el editor como punto de partida - todos los controles siguen siendo editables después, así que puedes ajustar el ángulo, añadir puntos o cambiar colores para hacerlo tuyo.
¿Puedo usar este degradado como imagen de fondo, y no solo como fondo sólido?
Sí, el código generado es un valor válido para las propiedades CSS background o background-image. Funciona en cualquier lugar donde se use una imagen de fondo, incluso combinado con una imagen real mediante una lista background-image separada por comas.