Cotton Sky
Pastel Gradient Backgrounds
Eight pastel mesh gradients — soft, low-saturation washes that keep an interface feeling light without going flat white. Pastels are the workhorses of onboarding screens, empty states, pricing cards, and anything aimed at a friendly first impression. Every design below is live CSS: copy it directly, or open it in the editor to shift the palette toward your brand.
The rule that keeps pastels from looking washed out: contrast through composition, not saturation. Notice how each design pairs two near-white blooms with one clearly deeper anchor color — remove the anchor and the background disappears; overdo it and the pastel calm is gone.
Dark text works directly on all of these, which makes them rare among gradients — most need a text scrim. If you customize one, keep node colors within a lightness band and let hue do the talking; the editor makes that easy to feel out by dragging.