Acerca de esta herramienta
Un degradado CSS es una imagen generada por el navegador que transiciona suavemente entre dos o más colores, declarada con las funciones linear-gradient(), radial-gradient() o conic-gradient(). Cada punto de color empareja un color con una posición opcional (un porcentaje a lo largo de la línea o el arco del degradado), y los degradados lineales y cónicos añaden un ángulo que define la dirección de la transición, mientras que los degradados radiales toman una forma (círculo o elipse) y una posición para su origen.
Úsalo para diseñar fondos de hero, rellenos de botones, superposiciones de tarjetas y acentos de separador sin ajustar la sintaxis a mano: elige un tipo, arrastra el ángulo, añade hasta seis puntos y copia la declaración background lista para pegar. La vista previa se apoya en un tablero de ajedrez para que veas cómo se componen los puntos semitransparentes, y los preajustes te ofrecen paletas probadas de dos y tres puntos para empezar.
Los degradados se renderizan como imágenes CSS, por lo que no tienen tamaño intrínseco — define un ancho y un alto (o úsalos como fondo), o el elemento se contraerá y no verás nada.
Preguntas frecuentes
¿Cuál es la diferencia entre los degradados lineales, radiales y cónicos en CSS?
Un degradado lineal transiciona los colores a lo largo de una línea recta con un ángulo dado, un degradado radial irradia hacia afuera desde un punto central como un círculo o una elipse, y un degradado cónico barre los colores alrededor de un punto central como las agujas de un reloj, razón por la cual se usa a menudo para ruedas de color y efectos de gráfico circular.
¿Cómo funcionan los ángulos de los degradados CSS?
Para linear-gradient(), un ángulo de 0deg orienta el degradado directamente hacia arriba (hacia la parte superior), 90deg hacia la derecha, 180deg hacia abajo y 270deg hacia la izquierda, aumentando en sentido horario. Para conic-gradient(), el valor from <angle> simplemente rota la posición de inicio del barrido de colores alrededor del centro.
¿Puedo usar más de dos colores en un degradado CSS?
Sí. Un degradado acepta cualquier número de puntos de color separados por comas, cada uno con una posición opcional como #f00 0%, #ff0 50%, #00f 100%. Los puntos se colocan en el orden en que los escribes, y este generador admite hasta seis.