mix()

Syntax

float mix(float x, float y, float a)
vec2 mix(vec2 x, vec2 y, float a)
vec3 mix(vec3 x, vec3 y, float a)
vec3 mix(vec3 x, vec3 y, vec3 a)
vec4 mix(vec4 x, vec4 y, float a)

Live example

Edit the code and the preview updates as you type.

How it works

mix(x, y, a) slides from x to y as a goes from 0 to 1. Think of a as a percentage:

The formula is x * (1.0 - a) + y * a. In the top half of the example a is uv.x, so the color moves evenly from red to blue. In the bottom half a comes from smoothstep, so the blend happens in a narrow, moving band.

Typical uses

• Gradients: mix(colorA, colorB, uv.y) for a vertical sky gradient.
• Drawing a shape over a background: mix(background, shapeColor, mask), where mask is 0 outside and 1 inside the shape.
• Animating between states: mix(start, end, progress) with progress driven by time.
• Blending per channel: mix(a, b, vec3(0.0, 0.5, 1.0)) uses a different amount for red, green and blue.

Common mistakes

• Swapping the arguments. The blend amount is the third argument: mix(colorA, colorB, t), not mix(t, colorA, colorB).
• Letting a go outside 0..1. mix does not clamp, so a = 1.5 overshoots past y. Wrap it in clamp if the input can exceed the range.
• Mixing a vec3 with a vec4. Both x and y must have the same type.

Related functions

Tutorials that use mix()

• Clamp Demo
  Use clamp() to keep values in range.
• Contrast with pow()
  Apply pow() to reshape a gradient curve.
• Grid Lines
  Use fract() and step() to draw grid lines.
• Horizontal Gradient
  Create a simple left-to-right gradient using vUv.x and mix().
• Smooth Band
  Create a soft horizontal band using smoothstep().
• Vertical Gradient
  Create a bottom-to-top gradient with vUv.y.