← Back to Portfolio

Gradient → Shader WebGL Rendered

Convert visual gradients to optimized GLSL code

Usage: Click on the gradient bar to add color stops. Drag stops to reposition. Select a stop and use the color picker to change its color. Press Delete or Backspace to remove selected stop. All previews are rendered with actual WebGL shaders.
%
mix() Chain Pixel-perfect

Sequential lerp between color stops using GLSL's mix() and smoothstep(). Exact reproduction of your gradient. Best for complex gradients with many stops.

Max error: 0.00%
GLSL
Polynomial Fit Fast

Fits R, G, B channels to polynomial curves. Fewer instructions, smooth results. Works best for simple gradients (2-4 colors). May overshoot on complex gradients.

Max error: 0.00%
GLSL
1D LUT Texture Pixel-perfect

Export as a 1D texture strip to sample in your shader. Perfect accuracy, single texture fetch. Best for complex gradients or when you need exact colors.

GLSL
Step Function Fastest

Hard-edged color bands without blending. Great for posterized/retro looks, color quantization, or when you need distinct color regions.

GLSL