Overview
A minimal mesh-gradient generator built from four corner colors. Each corner gets a color picker, and the tool composes a background-color plus four radial gradients anchored at the box corners, producing a soft color wash with no blur, no layers panel and no delay. The output is one background declaration block, copied with a click.
How It Works
Pick a color for each of the four corners. The 160 pixel preview immediately shows the blended wash: each corner color radiates inward from its corner and fades to transparent at the halfway point, over a background of the first corner color. The output panel shows the full declaration, a background-color line followed by four radial-gradient layers at 0% 0%, 100% 0%, 100% 100% and 0% 100%, and the Copy Mesh CSS button copies the block.
Step-by-Step Usage Guide
- Pick corner one; it also becomes the base background color.
- Pick the remaining three corner colors.
- Review the blended wash in the preview.
- Copy the four-gradient declaration.
Technical Specifications & Standards
The composition stacks four background-image layers, and CSS paints the first layer on top, so corner two sits above corner one in overlap zones. Each layer is an unnamed ellipse anchored at a corner with the syntax radial-gradient(at 0% 0%, color 0px, transparent 50%): omitting the shape keyword defaults to an ellipse sized to the farthest corner, and the transparent stop at 50% halves its visible reach, which is what keeps the wash soft instead of four solid quarter-discs. Because there is no blur filter, rendering is a single paint pass with no GPU cost, unlike blur-based mesh studios; the trade-off is a crisper falloff with visible radial structure on close inspection. The background-color underneath is your first corner color, so scaling the box beyond the gradient reach still shows a coherent color rather than white. Percentage positions track the element, so the wash rescales automatically at any size.
Targeted Use Cases
- Soft ambient backgrounds for cards and login panels.
- Quick color studies before committing to a heavier mesh studio.
- Lightweight decorative washes that cost nothing to paint.
- Placeholder art for empty states and loading screens.
Notes & Gotchas
- Pick corner colors with similar luminance for the smoothest wash; extreme light-dark pairs form visible ridges.
- Remember layer order: the second corner paints over the first where they overlap.
- Scale the corner colors to your theme rather than copying random hues; four unrelated colors read as noise.
- Use the blur-based mesh studio instead when you need truly soft, photographic blends.
Frequently Asked Questions
How are the four colors combined?
As four stacked radial-gradient layers, each anchored at one corner and fading to transparent at 50% of its reach, over a background-color set to the first corner color. CSS paints the first listed layer on top.
Why is there no blur option?
The tool intentionally uses crisp gradient falloff with no filter, which paints in a single pass with no GPU cost. The falloff is softer than it looks because each ellipse stops at half its natural reach; for blur-softened output use the mesh gradient studio.
Does the wash scale with the element?
Yes. The gradient positions are percentages of the element box, so the same declaration produces the same relative composition at any size, from a 100 pixel tile to a full-bleed section.
Which corner color shows through most?
The first corner is also the background-color, so its tone dominates the base, while the second corner paints as the topmost layer in overlaps. Reordering the pickers changes the blend.