ShaderBattle

Pixel basics · lesson 5 of 8 · Beginner · about 4 min

smoothstep(): soft edges

You will build: Instead of a hard split, fade from the dark color to the orange between x = 0.3 and x = 0.7.

Start this lesson All lessons
The picture produced by the shader in the lesson "smoothstep(): soft edges"
The target picture. In the lesson you write the shader that draws it, and a match bar shows how close you are.

smoothstep(e0, e1, x) is step's gentle sibling: it's 0 below e0, 1 above e1, and eases smoothly (an S-curve) in between.

float t = smoothstep(0.3, 0.7, uv.x);   // 0 until x=0.3, then ramps to 1 at x=0.7

This one function gives you antialiased edges, soft glows, gradients with a controlled width, and lots more. Keep e0 < e1 (to invert, use 1.0 - smoothstep(...)).

The numbers you need

Everything the picture depends on is given, so the challenge is the code, not guessing.

From
float3(0.1, 0.1, 0.3)
To
float3(1.0, 0.6, 0.2)
Edges
0.3 → 0.7

Try it in your own language

The lesson is written once and shown in every language. Pick yours: Unity (Built-in), Unity (URP), Unreal, Shadertoy / WebGL, OpenGL (LWJGL, raylib), three.js, GameMaker, LÖVE (Lua), Godot, Apple (iOS, macOS), WebGPU / Bevy.

Start coding

Go deeper

Concept explainers with a live example: smoothstep, shader anti-aliasing.

Part of the learning paths: From zero to ray marching, Shader art basics.

More in Pixel basics