Qué hace esta herramienta
Un degradado CSS es un fondo que pasa poco a poco de un color a otro y que se escribe como texto, no como imagen. Esta herramienta te deja construirlo mirándolo: elige lineal, radial o cónico, coloca las paradas de color en una barra y el CSS aparece debajo, listo para copiar. El mismo degradado se puede guardar como PNG de hasta 4096 píxeles por lado, útil para una imagen para redes, un fondo de pantalla o una maqueta. No se sube nada: el degradado se dibuja en tu navegador.
Lineal, radial y cónico
Un degradado lineal avanza a lo largo de una línea. El ángulo se mide en el sentido de las agujas del reloj desde arriba: 0deg apunta hacia arriba, 90deg a la derecha y 180deg hacia abajo. Aquí el valor inicial es 135deg, de la esquina superior izquierda a la inferior derecha. También puedes usar palabras como to right. Una esquina no es un ángulo fijo: en un cuadrado to top right equivale a 45deg, pero en una caja de 200 por 100 píxeles el navegador lo convierte en unos 26,57deg para que las dos esquinas que no son el destino tengan justo el color central.
Un degradado radial se expande desde un centro. La forma es círculo o elipse y el tamaño indica dónde cae la última parada: el lado o la esquina más cercana o más lejana. Sin tamaño, CSS usa una elipse que llega a la esquina más lejana.
Un degradado cónico gira alrededor de un centro como las agujas de un reloj. Las posiciones se miden sobre la vuelta completa, así que 25 % es un cuarto de vuelta. Es la forma habitual de dibujar un gráfico circular o una rueda de color solo con CSS.
Paradas, bordes duros y repetición
Cada parada tiene un color y una posición, del 0 % al 100 %. Dos paradas en la misma posición crean un borde duro en lugar de una mezcla, y así se hacen las rayas. La plantilla Rayas es repeating-linear-gradient(45deg, #fde68a 0%, #fde68a 10%, #f59e0b 10%, #f59e0b 20%): una banda amarilla y una naranja que suman el 20 % de la línea. En una caja de 100 por 100 píxeles la línea mide 141,42 píxeles, así que el patrón se repite cada 28,28 píxeles.
Si las paradas están desordenadas, el navegador sube una parada anterior hasta la posición de la que la precede. Esta herramienta evita la sorpresa escribiendo siempre las paradas ordenadas por posición.
La opacidad forma parte de cada parada. Los navegadores mezclan con el alfa premultiplicado, así que pasar de rojo a totalmente transparente conserva el rojo y solo lo vuelve menos visible: a mitad de camino es rojo con 50 % de opacidad, no un rojo oscuro apagado. El PNG sigue la misma regla. Un color opaco se escribe #rrggbb; con transparencia puedes elegir un hex de ocho dígitos como #ff000080 o rgba(255, 0, 0, 0.5), que significan lo mismo.
Prefijos, PNG y datos útiles
Los navegadores actuales entienden linear-gradient() y radial-gradient() sin prefijo desde hace más de una década, así que el código no necesita la versión -webkit-. conic-gradient() es más reciente (Chrome 69, Safari 12.1 y Firefox 83) y lo admiten todos los navegadores actuales. El PNG se pinta en un lienzo con las mismas paradas, así que coincide con la vista previa. Para sombras que acompañen al degradado, mira el generador de sombras; para comprobar la legibilidad del texto, las herramientas de color.
