Fundamentos de los degradados CSS
Los degradados CSS permiten transicionar de forma fluida entre múltiples tonalidades para crear fondos y elementos visuales en el diseño web. En lugar de utilizar imágenes estáticas que incrementan el peso de la carga de una página, el navegador dibuja estas transiciones directamente mediante código.
Esta herramienta facilita la configuración de las propiedades matemáticas y visuales que definen un degradado, permitiendo exportar el código CSS resultante de manera inmediata. El generador inicia por defecto con una configuración de dos paradas de color: #6366f1 en la posición 0% y #ec4899 en la posición 100%.
Degradados lineales: dirección y ángulos
Un degradado lineal mezcla los colores a lo largo de una línea recta. La trayectoria de esta mezcla se define mediante un ángulo específico que determina la dirección del flujo cromático.
- Ángulo de dirección: Se mide en grados (°), donde un valor de 0° apunta directamente hacia arriba y un valor de 90° apunta hacia la derecha.
- Comportamiento visual: Los colores se alinean perpendicularmente a la línea del ángulo establecido, distribuyéndose de manera uniforme entre el punto de inicio y el de destino.
Para proyectos que requieren ajustar con precisión la orientación de una transición de color, el control de ángulo permite definir cualquier dirección en el plano bidimensional del fondo.
Degradados radiales: formas y distribución
A diferencia de los lineales, los degradados radiales extienden los colores hacia fuera desde un punto central, generando una transición concéntrica. En este tipo de degradado no se utiliza un ángulo de dirección, sino que la distribución se gestiona a través de la geometría de su contorno.
El generador permite seleccionar entre dos estructuras geométricas para la propagación del color:
- Elipse: Los colores se expanden adaptándose a las proporciones del contenedor, lo que resulta útil para fondos de pantalla anchos o elementos rectangulares.
- Círculo: La transición mantiene una proporción simétrica y equidistante desde el centro en todas las direcciones, sin importar la relación de aspecto del contenedor.
Degradados cónicos: transiciones circulares
El degradado cónico realiza una transición de color que barre alrededor de un punto central, emulando el comportamiento de una rueda de color o un gráfico de sectores.
La progresión no se realiza de dentro hacia fuera ni a lo largo de una línea, sino en el sentido de las agujas del reloj. Al igual que en los degradados lineales, se puede definir un ángulo inicial para determinar el punto exacto de la circunferencia donde comienza la primera parada de color, apuntando 0° hacia arriba y 90° hacia la derecha.
El rol de las paradas de color
Las paradas de color son los puntos de anclaje que determinan qué color aparece en qué lugar exacto de la transición. Cada parada requiere dos parámetros específicos:
- Color de la parada: El valor cromático que se desea integrar.
- Posición: Un valor porcentual que va desde el 0% (inicio del degradado) hasta el 100% (final del degradado).
El generador admite un máximo de ocho paradas de color. Cuando se alcanza este límite de ocho paradas, el botón "Añadir parada" se deshabilita automáticamente para evitar excesos en la declaración del código. Cualquier parada nueva que se añada al degradado se crea de forma predeterminada en la posición del 50%.
Uso del Generador de Degradados CSS
El proceso para diseñar y exportar un degradado consta de pasos sencillos integrados en la interfaz:
- Selección del tipo: En el panel "Tipo de degradado", elige entre "Lineal", "Radial" o "Cónico".
- Configuración geométrica: Ajusta el "Ángulo" para las opciones lineales y cónicas, o selecciona la "Forma" ("Elipse" o "Círculo") si has optado por un degradado radial.
- Gestión de paradas: Modifica el "Color de la parada" y la "Posición" de cada punto. Utiliza "Añadir parada" para incorporar nuevos tonos o "Quitar parada" para eliminar los que no necesites.
- Obtención del código: Una vez que la vista previa en tiempo real muestre el resultado deseado, haz clic en el botón "Copiar CSS". El estado del botón cambiará para confirmar que el código se encuentra en tu portapapeles, listo para ser pegado en tu hoja de estilos.
Toda la ejecución y el procesamiento de los degradados se realiza de manera local en el navegador del usuario. Ninguno de los datos de configuración, colores o parámetros introducidos se sube a BroBroGo.
Preguntas frecuentes
¿Qué diferencia hay entre un degradado lineal, radial y cónico? Un degradado lineal mezcla los colores a lo largo de una línea recta que orientas con un ángulo. Uno radial los expande desde el centro hacia fuera, en círculo o elipse. Uno cónico los gira alrededor del centro, como una rueda de color.
¿Qué son las paradas de color? Cada parada de color es un color fijado en una posición del degradado: 0 % al principio y 100 % al final. Mueve una parada para cambiar dónde predomina su color, o añade más para una mezcla más rica. Puedes usar hasta ocho.
¿Cómo controlo la dirección? En un degradado lineal o cónico, el control de ángulo marca la dirección: 0° apunta hacia arriba y 90° hacia la derecha. El radial no tiene ángulo; elige forma de círculo o elipse para cambiar cómo se expande.