Red to Blue Gradient CSS — Generate the Code in Seconds

Red to blue is one of the most-searched CSS gradient combinations. It works for hero sections, buttons, progress bars, and card accents. This guide shows you how to generate the exact code — with variations — and copy it directly into your project.

The Basic Red to Blue Linear Gradient

The simplest red-to-blue gradient is a horizontal linear gradient:

background: linear-gradient(to right, #e53e3e, #3182ce);

That gives you a clean left-to-right transition from red to blue. Swap to right for to bottom if you want a vertical version, or use a degree value like 135deg for a diagonal.

The free CSS gradient generator lets you dial in the exact red and blue shades, preview the result in real time, then copy the CSS with one click. No guessing hex values — pick visually, copy the output.

Red to Blue Gradient Variations Worth Knowing

Red to purple to blue (tri-stop): Add a midpoint stop at purple to create a richer, more complex gradient: linear-gradient(to right, #e53e3e, #805ad5, #3182ce). The three-stop version reads as more premium than the two-stop version.

Diagonal: linear-gradient(135deg, #e53e3e, #3182ce) — classic for hero section backgrounds and card headers.

Red to transparent (overlay use): linear-gradient(to right, rgba(229,62,62,0.85), rgba(49,130,206,0.85)) — lets background images show through while the gradient still creates visual separation for text.

Build each of these in the generator by adjusting stops and opacity sliders, then copy the exact output.

Sell Custom Apparel — We Handle Printing & Free Shipping

Where Red to Blue Gradients Work Best

• CTA buttons: Gradient buttons stand out against flat-color backgrounds. Left-to-right or diagonal both work well.
• Progress bars and loading indicators: The direction of the gradient reinforces the direction of progress.
• Hero section backgrounds: A full-width red-to-blue hero background is high-contrast and energetic. Pair with white text.
• Data visualisation accents: Chart bars or line graph fills benefit from gradient stops that map low values (red) to high values (blue) or vice versa.
• Card headers: A gradient strip across the top of a card adds visual weight without a border.

Accessibility: Text Contrast on Red to Blue Gradients

The midpoint of a red-to-blue gradient often hits purple — a medium-value colour that can fail contrast tests against both white and dark text. Before shipping, check contrast at multiple points across the gradient, not just the endpoints.

The safest approach: use white text and ensure the lightest point of the gradient (usually the blue end) still meets 4.5:1 contrast ratio against white. If it does not, darken the blue stop or add a semi-transparent overlay layer over the gradient before placing text.

For decorative elements like borders, dividers, or button backgrounds without text, contrast is not a concern — use any shade combination you like.

Frequently Asked Questions

What is the CSS code for a simple red to blue gradient?

background: linear-gradient(to right, #e53e3e, #3182ce); — adjust the hex values for your exact shades of red and blue.

How do I add a purple midpoint to a red-blue gradient?

Add a third colour stop: linear-gradient(to right, #e53e3e, #805ad5, #3182ce). The middle stop creates a smooth red-purple-blue transition.

Can I use any shade of red and blue, or are specific values better?

Any hex values work. For web use, slightly desaturated reds and blues (like Tailwind red-600 and blue-600) tend to look more professional than full-saturation primaries.