Degradados

Funciones

• 180 degradados, cada uno con vista previa y una línea de CSS
• Búsqueda por nombre, sin distinguir mayúsculas, también por fragmento
• Búsqueda por color: pega un valor y mira qué degradados lo usan
• Recorrido por familia de tono: rojos, naranjas y marrones, amarillos, verdes, azules y turquesas, morados, neutros
• Cada degradado lista su ángulo y todas sus paradas de color, cada una con su muestra
• Sacar un solo color: cada parada es su propia fila, así que puedes copiar solo un extremo
• Los ángulos están normalizados a 0–360 grados, así que el CSS se copia válido
• Los 180 en un desplegable con búsqueda, con el ángulo y el número de paradas en la sugerencia
• Vacío lista el conjunto entero, agrupado por tono
• Tolerancia al pegado: las comillas y los caracteres de ancho completo no rompen la búsqueda
• El CSS y los valores de color se copian fila a fila, directos a la hoja de estilos

Cómo se usa

1. Escribe un nombre de degradado, como Night Fade, para ver su vista previa, su CSS y sus paradas
2. O pega un color como #ff9a9e para ver qué degradados lo usan
3. Para recorrer por familia de color, escribe el nombre de la familia
4. Deja el cuadro vacío para listar los 180, agrupados por tono

Preguntas frecuentes

¿Puedo usarlos en un proyecto?

Sí, pero adáptalos a tu contexto. Los datos vienen de una colección de código abierto con licencia MIT, así que los valores en sí no tienen restricción. Dos sugerencias. Primera, comprueba tú la accesibilidad: el texto blanco sobre un degradado falla el contraste en algunos, sobre todo en los cálidos de tono medio; verifícalo con los valores de color que se muestran, no confiando en que la vista previa se vea bien. Segunda, rendimiento: un `linear-gradient` es barato en sí, pero una superficie grande de degradado combinada con animación o filtros consume bastante más GPU, así que mide ese fondo a pantalla completa con animación de desplazamiento antes de publicarlo.

¿Por qué algunos degradados tienen el mismo color dos veces?

Esas 5 entradas son planas en los datos originales (mismo color en ambos extremos): forman parte de la colección y no son un error, una de ellas es en la práctica un gris claro. Las mantuvimos, y mantuvimos la forma de dos paradas, porque así sigue siendo un `linear-gradient` válido que se dibuja como un color sólido, que es lo que de verdad es. Colapsarlo a una sola parada haría que dejara de parecer un degradado en el CSS.

¿Por qué algunos degradados no terminan en 100%?

Es una parada dura: la última parada se queda en, por ejemplo, 42% y todo lo que viene después se rellena con ese color, un efecto intencionado y no un dato que falte. Hay 7 así, y uno cuyo primer valor está en 59%. Lo único que ordenamos fueron dos cosas que no cambian el resultado (colapsar paradas redundantes del mismo color y normalizar restos de `1%`/`99%` a `0%`/`100%`). Deliberadamente no llevamos los extremos a los bordes, porque eso convertiría una zona sólida en un degradado y cambiaría su aspecto.

¿Cómo saco un solo color del degradado?

Cada parada es su propia fila, con su muestra, así que puedes copiar ese valor suelto. Es lo que más se pide: usar el degradado entero es el caso minoritario; lo habitual es que te haya llamado un extremo y quieras ese color como base. Llévalo luego a la herramienta de esquemas de color para generar un conjunto completo en torno a él.

¿Cómo se relacionan los ángulos con las direcciones por palabra clave?

En CSS, `0deg` apunta de abajo arriba y el ángulo crece en sentido horario: `90deg` es de izquierda a derecha, `180deg` de arriba abajo y `270deg` de derecha a izquierda. Las formas con palabra clave (`to right`, `to bottom right`) también corresponden a ángulos fijos, pero en un elemento de proporción desconocida la palabra clave ajusta su ángulo para cruzar la diagonal, mientras que un ángulo fijo no lo hace; por eso en diseño adaptable suelen ser más seguras las palabras clave, mientras que los ángulos fijos van bien en elementos cuya proporción controlas.