Input
4 corner colors + 80% blur
Output
Soft gradient background + CSS
Design Tools
Gradient Mesh Generator — Four-Corner Soft Backgrounds
Blend four corner control colors into layered radial gradients with blur to create soft mesh-like backgrounds and copyable CSS—useful for landing pages, brand visuals, and multi-color experiments.
GradientMeshBackground
Favorite this tool
No favorite storage mode has been selected.
Quick actions
Copy this tool URL or open the system share sheet on a supported device.
设计配色
Gradient Mesh Generator
左上
右上
左下
右下
80%
预览
CSS 代码
Use cases
- Create a soft landing-page background
- Experiment with multi-color brand washes
- Export paste-ready background CSS
How to use
- Choose the four corner colors
- Adjust blur
- Preview and copy the CSS
Example input and output
FAQ
How is this different from a linear gradient?
It stacks radial gradients with blur for softer transitions closer to design-tool mesh gradients.
Is the output true CSS mesh syntax?
No. It outputs compatible layered radial gradients rather than experimental mesh-only syntax.
Tools
Related tools
Continue with another translated tool for a nearby task.
CSS Gradient Generator
CSS Gradient Generator — Linear, Radial, Conic
Visually build linear, radial, and conic CSS gradients. Adjust angle and stop positions, add multiple stops, and copy CSS for backgrounds, buttons, and brand transitions.
CSS Gradient Background
Color Harmonizer
Color Harmonizer — Classic Harmony Rules
Pick a base color and generate schemes with complementary, analogous, triadic, tetradic, split-complementary, or monochromatic rules. Preview UI usage and export CSS variables for brand and component work.
Palette Color Harmony