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.

Type

Angle (135°)

Interpolation color space

Color stops

50%

100%

CSS

background: linear-gradient(in oklch 135deg, #38bdf8 0%, #3b82f6 50%, #4338ca 100%);

Tailwind v4 (@theme)

Use it as bg-(image:--gradient-brand)

@theme {
  --gradient-brand: linear-gradient(in oklch 135deg, #38bdf8 0%, #3b82f6 50%, #4338ca 100%);
}

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.