Crea y previsualiza gradientes lineales y radiales, explora combinaciones prediseñadas y copia el código CSS.
Crea y previsualiza gradientes lineales y radiales, explora combinaciones prediseñadas y copia el código CSS. Úsala para trabajo diario, desarrollo, aprendizaje o comprobaciones rápidas.
Esta herramienta funciona en tu navegador. Antes de usar datos sensibles, comprueba que confías en tu dispositivo y navegador.
Un degradado CSS es una imagen que el navegador dibuja al vuelo: se coloca en background o background-image sin descargar archivos y se mantiene nítido a cualquier tamaño. La sintaxis lineal es linear-gradient(ángulo, parada 1, parada 2, …). 0deg va de abajo arriba, 90deg de izquierda a derecha y el valor por defecto, 180deg, de arriba abajo; 135deg da la popular diagonal de arriba a la izquierda hacia abajo a la derecha. El radial-gradient se expande desde un centro y es ideal para focos, resplandores o dar volumen a botones.
Una parada de color combina un color y una posición, como #f59e0b 0% y #10b981 100%. Añadir paradas intermedias controla el ritmo de la transición, y colocar dos en la misma posición (por ejemplo 50% y 50%) hace que el color cambie de golpe, creando rayas nítidas o fondos divididos. En esta herramienta cada parada tiene su propia posición y opacidad; la opacidad se exporta como rgba(), muy útil para superposiciones que mantienen legible el texto blanco sobre fotos.
Algunos trucos: si los extremos de un degradado grande están muy separados en el círculo cromático, el centro puede volverse gris apagado; añade un color intermedio o elige tonos cercanos. Los degradados muy sutiles pueden mostrar escalones visibles (banding) en algunas pantallas; aumentar un poco la diferencia o añadir una tercera parada ayuda. Para texto degradado, pon el degradado como fondo y combínalo con background-clip: text y color: transparent.
Los navegadores modernos admiten desde hace años linear-gradient y radial-gradient sin prefijo, así que el CSS copiado funciona tal cual, sin -webkit-. Parte de una plantilla, ajusta el ángulo y las paradas, revisa la vista previa en vivo y copia el código con un clic.
0deg va de abajo arriba, 90deg de izquierda a derecha, 180deg (por defecto) de arriba abajo y 270deg de derecha a izquierda. 135deg es una diagonal de arriba-izquierda a abajo-derecha.
Coloca dos paradas vecinas en la misma posición, como rojo 50% y azul 50%. El color cambia en ese punto sin mezclarse.
Superpón un degradado lineal de transparente a negro semitransparente, por ejemplo de rgba(0,0,0,0) a rgba(0,0,0,0.6), para oscurecer la zona del texto.
No. Todos los navegadores principales admiten la sintaxis estándar desde hace años; basta con linear-gradient y radial-gradient.
Ver esta categoría: Diseño y color
Convierte valores de color entre HEX, RGB, HSL y CMYK, y calcula el ratio de contraste de accesibilidad WCAG 2.1.
Crea cajas con sombras multidimensionales y efectos de vidrio esmerilado con copia rápida de reglas CSS.
Evalúa ratios de contraste entre fondo y texto con calificaciones AA/AAA y simulador de daltonismo.
Genera partículas, cuerpos elásticos, colisiones y campos de gravedad interactivos en tiempo real con Canvas.
