Blue CSS Gradient Generator
A ready-made blue CSS gradient you can copy in one click, or tweak below. It runs from a bright sky blue into a deep indigo for a calm, trustworthy background that fits dashboards, SaaS heroes and login screens. 100% in your browser - copy the CSS or a Tailwind v4 export.
About the blue gradient
Blue is the most-used background hue on the web because it reads as calm, stable and trustworthy, which is why so many products lean on it. This preset blends a light sky blue into a deeper indigo so the gradient has real depth instead of a flat wash. Drag the stops, change the angle, or switch the interpolation to OKLCH for an even smoother blue-to-blue transition, then copy the CSS or a Tailwind v4 @theme token.
The CSS for this gradient:
background: linear-gradient(in oklch 135deg, #38bdf8 0%, #3b82f6 50%, #4338ca 100%);
Frequently Asked Questions
Use two or more blue stops in a linear-gradient, for example background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 50%, #4338ca 100%);. Start from the preset above, drag the stops or angle to taste, and click Copy CSS.
Pair a light sky blue like #38bdf8 with a mid blue such as #3b82f6 and a deep indigo like #4338ca. Keeping the hues in the same blue family and only shifting lightness gives a clean, non-muddy blend, especially with OKLCH interpolation.