Shadertoy Rounded Rectangle

// GLSL Rounded Rectangle Shader for Shadertoy // Creates a rounded rectangle with configurable radius, outline, and colors. // Function to calculate the Signed Distance Field (SDF) for a rounded box // p: Point coordinates (centered, aspect-corrected) // b: Half-dimensions of the box (e.g., width/2, height/2) // r: Corner radius float sdRoundedBox(vec2 p, vec2 b, float r) { // Calculate distance to box edges, offset by radius vec2 q = abs(p) - b + r; // If inside the rounded corner region (q > 0), calculate distance to corner center. // Otherwise (q <= 0), the point is inside the straight edge region. // min(max(q.x, q.y), 0.0) is the distance along the axis into the shape from the rounded edge start. return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r; } // Main shader function for Shadertoy void mainImage(out vec4 fragColor, in vec2 fragCoord) { // --- Parameters (Hardcoded for Shadertoy) --- // Geometry (Normalized Coordinates relative to shorter screen dimension 'y') vec2 rectSize = vec2(0.6, 0.4); // Total width and height of the rectangle (0.0 to 1.0+) float radius = 0.1; // Corner radius (0.0 for sharp corners) float outlineThickness = 0.02; // Thickness of the outline // Colors (RGBA) vec4 rectColor = vec4(0.2, 0.5, 0.8, 1.0); // Inner rectangle color vec4 outlineColor = vec4(1.0, 1.0, 1.0, 1.0); // Outline color vec4 backgroundColor = vec4(0.1, 0.1, 0.1, 0.5); // Background color // --- End Parameters --- // Calculate normalized coordinates (0 to 1) and center them, correcting aspect ratio // Coordinates are relative to the center (0,0), scaled by the shorter screen dimension (y) vec2 p = (2.0 * fragCoord - iResolution.xy) / iResolution.y; // Calculate half-dimensions for the SDF function vec2 b = rectSize * 0.5; // Ensure radius is not larger than the smallest half-dimension float maxRadius = min(b.x, b.y); float r = clamp(radius, 0.0, maxRadius); // Calculate the signed distance from the current point 'p' to the rounded rectangle surface // Positive distance means outside, negative means inside. float d = sdRoundedBox(p, b, r); // Calculate anti-aliasing width based on screen resolution (approx. 1 pixel width) // Using fwidth is generally more robust than fixed pixel size // float aa = 1.5 / iResolution.y; float aa = fwidth(d) * 0.5; // Use half the gradient width for smoothstep range // --- Coloring Logic --- // 1. Determine mix factor for the outer edge of the outline (background -> outline) // Transitions from 0 to 1 as 'd' goes from -aa to +aa (around d=0) float outlineMix = smoothstep(-aa, aa, d); // 2. Determine mix factor for the inner edge of the outline (outline -> inner rect) // Transitions from 0 to 1 as 'd' goes from -outlineThickness-aa to -outlineThickness+aa (around d=-outlineThickness) float innerMix = smoothstep(-aa, aa, d + outlineThickness); // 3. Blend colors step-by-step: // a. Start with the background color. vec4 color = backgroundColor; // b. Blend the outlineColor based on the outer edge distance. // Where outlineMix is 1, we get outlineColor. Where 0, we keep backgroundColor. color = mix(color, outlineColor, outlineMix); // c. Blend the rectColor based on the inner edge distance. // Where innerMix is 1, we get rectColor. Where 0, we keep the result from step b. color = mix(color, rectColor, innerMix); // --- Final Output --- // The alpha component is handled correctly by the vec4 mix operations. fragColor = color; // --- Debug Views (Uncomment to use) --- // Visualize SDF distance: fragColor = vec4(vec3(0.5 + 0.5 * sign(d) * pow(abs(d), 0.2)), 1.0); // Visualize outline mix factor: fragColor = vec4(vec3(outlineMix), 1.0); // Visualize inner mix factor: fragColor = vec4(vec3(innerMix), 1.0); } Shadertoy Rounded Rectangle

To view this shader, copy the code from shader.frag and paste it into a new shader on Shadertoy.com.

The parameters (colors, size, radius, outline) are hardcoded at the beginning of the mainImage function in the shader code.