Colores y Gradientes
Redactado por
Sebastian V. Fecha de publicación
18/04/2026
Tiempo de lectura
6 min
Tema
Shaders GLSL
Más allá del CSS
En CSS crear un gradiente es tan fácil como `linear-gradient()`. En Shaders, tú eres el motor matemático que calcula ese gradiente. La ventaja es que aquí tienes control absoluto: puedes rotarlos, curvados, y hacerlos reaccionar al tiempo y al espacio.
La función mix()
La herramienta definitiva para el color es `mix(color1, color2, factor)`. Si el factor es `0.0`, devuelve el `color1`. Si es `1.0`, devuelve el `color2`. Si es `0.5`, los mezcla perfectamente a la mitad.
Patrones con step() y smoothstep()
¿Qué pasa si en lugar de un gradiente suave quieres un corte duro, o una banda? Utilizas la función `step(limite, valor)`. Si el valor es menor al límite, devuelve 0.0. Si es mayor, devuelve 1.0. Es como un if statement pero optimizado para GPU.
El Círculo Perfecto
varying vec2 vUv;
void main() {
// Mueve el origen UV al centro (-0.5 a 0.5)
vec2 centeredUv = vUv - 0.5;
// distance() calcula la distancia desde el centro
float dist = distance(centeredUv, vec2(0.0));
// smoothstep(min, max, value) crea un borde suavizado
// Si dist < 0.2 -> 0.0
// Si dist > 0.25 -> 1.0
float mask = smoothstep(0.2, 0.25, dist);
// Mezclamos Colores
vec3 colorFondo = vec3(0.1);
vec3 colorCirculo = vec3(0.98, 0.36, 0.49); // Rosa
vec3 colorFinal = mix(colorCirculo, colorFondo, mask);
gl_FragColor = vec4(colorFinal, 1.0);
}Dibujando formas geométricas puras calculando distancias matemáticas.
Errores comunes
Practica lo aprendido
Domina el mix() y el smoothstep().