Crea degradados CSS lineales y radiales con vista previa. Elige de 2 a 5 colores, ajusta posiciones, invierte el degradado y copia o descarga CSS. Gratis.
● Tus archivos son tuyosCargando conversor…
Volver a cargar el conversorElige una paleta o modifica los colores. Selecciona un degradado lineal o radial, la cantidad de colores y sus posiciones, y ajusta el ángulo lineal. La vista previa y el CSS se actualizan al editar. Cambiar la cantidad distribuye los puntos activos uniformemente. Copia las declaraciones dentro de una regla CSS o descárgalas como gradient.css.
De dos a cinco colores HEX opacos (3 o 6 dígitos, con o sin #). Posiciones enteras de 0% a 100% en orden no decreciente; las posiciones iguales crean un borde nítido. Ángulos lineales de 0 a 360 grados. Se admiten cifras árabes y persas para posiciones y ángulos. Los degradados radiales son círculos centrados. Sin transparencia, espacios de color personalizados, degradados repetidos/cónicos, exportación de imágenes ni importación de CSS. Los datos no se guardan ni salen del navegador.
Un degradado es una imagen CSS que se adapta a su elemento. Usa background-image para el degradado y background-color como color de respaldo. Este ejemplo va de izquierda a derecha; copia las declaraciones generadas en tu hoja de estilos.
background-color: #156B4F;
background-image: linear-gradient(90deg, #156B4F 0%, #8CE8B3 100%);Asocia un color con una posición en el degradado. Este editor usa porcentajes. Acerca los puntos para una transición más rápida, sepáralos para una mezcla más amplia o sitúa puntos contiguos en la misma posición para un borde nítido.
CSS empieza en 0 grados hacia arriba y gira en sentido horario. 90 apunta a la derecha, 180 abajo y 270 a la izquierda. Estas direcciones no cambian en páginas árabes ni en otras de derecha a izquierda.
Se extiende desde un centro en vez de seguir una línea recta. Esta herramienta crea un círculo centrado en el elemento; el primer color queda hacia el centro y el último hacia fuera.
Elige de dos a cinco colores. Cambiar la cantidad redistribuye las posiciones activas uniformemente. Invertir cambia el orden de colores y refleja las posiciones alrededor del 50%, conservando las distancias. Restablecer recupera la paleta Menta.
El degradado se adapta al elemento. Cambiar su forma o dimensiones cambia cómo se muestra el mismo degradado. El navegador y la configuración de color de la pantalla también pueden influir.
La vista previa no mide el contraste. Como el fondo varía, comprueba el contraste donde aparezca texto; revisar un solo extremo no basta. Usa el comprobador de contraste para pares concretos de texto y fondo.