CSS Gradient
Sky Gradient
This sky gradient captures a perfect clear day, transitioning from soft powder blue to a rich azure. It is one of the most universally appealing gradients. Use it for SaaS landing pages, weather apps, or any design that should feel open, clean, and trustworthy.
CSS
background: linear-gradient(180deg, #a8e6cf 0%, #88d8f5 40%, #3a7bd5 100%);Color Stops
#A8E6CF
#88D8F5
#3A7BD5
Frequently Asked Questions
›What makes a good sky gradient?
A realistic sky gradient is lighter at the horizon (top or bottom) and deeper blue in the opposite direction. Use at least two blue stops with different saturation for depth.
›Can I use this gradient as a page background?
Yes. Add min-height: 100vh to the element and the gradient will fill the viewport. Use background-attachment: fixed for a parallax-like effect on scroll.
›How do I adjust the color intensity?
Increase saturation for more vivid blues, or add white (#FFFFFF) as a first stop for a lighter, more washed-out sky effect.
sky gradientsky gradient cssblue sky gradientlight blue gradientclean blue gradient