Generador de degradados CSS gratis

Cuándo alcanzar un gradiente CSS

Los grados añaden profundidad a los banners, botones, tarjetas y fondos de sección héroes sin subir una imagen. Los diseñadores los usan para lavar los colores de la marca, fondos de páginas sutiles y llamadas a la acción que captan la atención. Debido a que el navegador los dibuja, escalan a cualquier tamaño de pantalla sin desenfocar.

Los desarrolladores suelen utilizar un generador para probar ideas rápidamente y luego pegar el resultado en una hoja de estilo. También es útil cuando un diseñador entrega dos o tres colores de marca y es necesario probar cómo se mezclan antes de elegir una dirección.

El generador ofrece gradientes lineales con cualquier ángulo de 0 a 360 grados, y gradientes radiales que se extienden como un círculo desde el centro. Puedes usar hasta ocho paradas de color.

Ejemplo práctico

Comienza con las paradas predeterminadas: #6366f1 al 0% y #ec4899 al 100%, con Linear seleccionado. Establecer el deslizador de ángulo a 90 grados. La vista previa ahora se ejecuta de índigo a la izquierda a rosa a la derecha, y la caja CSS muestra: fondo: lineal-gradiente (90deg, #6366f1 0%, #ec4899 100%);

Ahora haz clic en Agregar parada. Una nueva parada copia el último color y se coloca un 5% más adelante, con un tope del 100%. Cambia su color a #f59e0b y arrástrelo al 100%, luego mueve la parada rosa al 50%. El código se convierte en lineal-gradiente (90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%), una mezcla de tres colores desde el índigo hasta el rosado hasta el ámbar.

Cambiar a Radial y las mismas paradas producen radial-gradiente (círculo en el centro, #6366f1 0%, #ec4899 50%, #f59e0b 100%). El índigo se sienta en el medio y el ámbar alcanza el borde exterior.

Cómo funcionan los ángulos de gradiente y las paradas

En CSS, 0deg puntos arriba, 90deg puntos a la derecha, 180deg puntos abajo y 270deg puntos a la izquierda. El 135deg por defecto se ejecuta desde la parte superior izquierda hacia la parte inferior derecha. El ángulo describe la dirección en la que los colores viajan, por lo que la primera parada aparece en el lado opuesto.

Cada parada es un color y una posición del 0% al 100%. El navegador se mezcla sin problemas entre paradas vecinas. Dos paradas en la misma posición crean una línea dura, que es cómo se hacen las rayas. Puede elegir colores con el selector o escribir un valor hexadecimal en el campo de texto al lado.

Para el modo radial, la herramienta utiliza siempre un círculo centrado en el elemento. La salida es una línea de fondo que puede pegar en cualquier selector.

Errores comunes a evitar

Colocar el texto sobre un gradiente fuerte sin comprobar el contraste es el problema más común. El texto puede ser legible en el extremo oscuro, pero se desvanece en el extremo de la luz. Prueba el contraste en ambos extremos, o añade una superposición sólida detrás del texto.

Las paradas fuera de servicio también pueden sorprenderte. Si una parada posterior tiene una posición más baja que una anterior, los navegadores lo tratan como si estuviera en la posición anterior, lo que crea un borde súbito. Mantén las posiciones aumentando desde el primero hasta el último. Por último, mantén al menos dos paradas, ya que un gradiente necesita dos colores para mezclar, y recuerda que cualquier otra regla de fondo más adelante en su CSS puede anular esta.