uiGradients: una colección de degradados de código abierto para diseñadores y desarrolladores 77

uiGradients es una colección de degradados de código abierto para diseñadores y desarrolladores, con muchos degradados lineales y radiales ya preparados. Puedes verlos en línea, copiar el código CSS e incluso utilizarlos en tu código a través de gradients.json. En muy poco tiempo podrás usarlos en páginas web, aplicaciones o diseño gráfico.

Características principales de uiGradients

• Fácil de usar: elige el degradado que te guste y haz clic en la esquina superior derecha para copiar el código o descargar la imagen.

• Compatible con múltiples formatos: admite CSS, SCSS, LESS, Stylus, Swift, Android XML, entre otros, para que personas con distintas tecnologías puedan usarlo directamente.

• Mantenedores: todos los degradados se almacenan en el archivo gradients.json del repositorio de GitHub; cualquiera puede bifurcarlo y añadir nuevas combinaciones de colores, que se publican en cuanto el pull request se aprueba.

• Numerosos recursos relacionados: ya existen proyectos relacionados como extensiones para iOS, componentes de React, una versión en SCSS y helpers de Handlebars, lo que facilita su uso en distintos proyectos de ingeniería.

• Gratuito y de código abierto: se distribuye bajo la licencia MIT, por lo que puede usarse con fines comerciales y modificarse, siempre que se mantenga la indicación de los derechos de autor del autor original.

Casos de uso de uiGradients

• Para fondos, botones, barras de navegación, tarjetas y otros elementos destacados de sitios web o aplicaciones.

• Para buscar el color principal o los colores secundarios de una marca y probar rápidamente si la combinación funciona.

• Para rellenar con degradados en diseños gráficos, ya sean presentaciones, pósteres o imágenes para redes sociales.

• Como referencia al estudiar la teoría del color, para ver qué degradados son tendencia actualmente.

Cómo usar uiGradients (ejemplo en Web)

1. Abre la web oficial de uiGradients, haz clic en cualquier degradado de la lista de la izquierda y previsualízalo al instante en la derecha.

2. Selecciona "Copy CSS" en la esquina superior derecha para obtener un código como este:

background: linear-gradient(to right, #ff416c, #ff4b2b);

3. Pégalo en tu hoja de estilos o en un estilo en línea, guarda y actualiza para ver el resultado.

Consejos sobre uiGradients

• Si quieres dejarte llevar por la inspiración, añade #random al final de la URL y accederás a un degradado aleatorio.

• También funciona en teléfonos y tablets: la página se adapta al tamaño de la pantalla, así que solo tienes que elegir un degradado y copiar el código.

• Combínalo con otras herramientas de combinación de colores, como Color Hunt o Mesh Gradients, para crear combinaciones de colores más complejas.