How to Add a Gradient Background in React (Tailwind and CSS)

You want a gradient background in your React app. The code is short. The hard part is making it look good, not like a default button from 2014.

This covers both: the plain CSS gradient you can paste in ten seconds, and the animated mesh gradient you generate and export as a component.

A CSS gradient background in one line (inline style)

A gradient background is just a background value: a CSS linear gradient. In React you set it in the style prop:

export function Hero() {
  return (
    <div
      style={{
        minHeight: "100vh",
        background: "linear-gradient(135deg, #6366f1, #ec4899)",
      }}
    >
      <h1>Ship something today</h1>
    </div>
  );
}

That is it. Two colors, one angle. 135deg runs top-left to bottom-right. Swap the hex values and you are done.

A reusable CSS gradient background (class)

Inline styles get repetitive. Move the CSS gradient to a class so every section can reuse it:

.hero {
  min-height: 100vh;
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
}

<div className="hero">
  <h1>Ship something today</h1>
</div>

Adding a third stop in the middle (#a855f7 50%) gives the blend somewhere to breathe instead of a hard two-color fade.

A Tailwind gradient background

Tailwind has gradient utilities built in. For a Tailwind gradient, pick a direction, a from, an optional via, and a to:

<div className="min-h-screen bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500">
  <h1>Ship something today</h1>
</div>

Need an exact angle or exact hex values that are not in your theme? Use an arbitrary value:

<div className="min-h-screen bg-[linear-gradient(135deg,#6366f1,#a855f7,#ec4899)]">
  <h1>Ship something today</h1>
</div>

Here are a few palettes that read well behind white text:

Where the plain gradient falls short

A linear-gradient is a straight line between colors. It is fine, but it has two tells:

1. Gradient banding. On large areas, the fade shows visible stripes, especially on cheaper screens and after compression.
2. It looks flat. Every linear gradient has the same shape. That is why they all start to look the same.

A mesh gradient fixes both. Instead of a straight line, colors bloom from multiple points and blend in curves, with a little grain to kill the banding. That soft, multi-directional blend is the look most modern hero backgrounds reach for.

You can fake a static mesh with stacked radial gradients:

.mesh {
  background-color: #6366f1;
  background-image:
    radial-gradient(at 20% 30%, #ec4899 0px, transparent 50%),
    radial-gradient(at 80% 0%, #a855f7 0px, transparent 50%),
    radial-gradient(at 0% 100%, #22d3ee 0px, transparent 50%);
}

This gets you partway. But it still bands, it cannot animate, and tuning four radial stops by hand is tedious. A real mesh gradient renders on the GPU, which is not something you want to hand-write in CSS.

Skip the hand-coding: use a mesh gradient generator

This is the fast path. Instead of guessing hex values, use a gradient generator to design it visually and copy the code out.

1. Open the mesh gradient generator and press spacebar until you like a palette. Every press gives you a harmonious set of 2 to 8 colors.
2. Tune distortion, swirl, grain, and speed until it fits your design.
3. Open Export, choose Code, and copy it as a React component, plain CSS, or Tailwind config.

The exported React component drops straight into your project, no dependency to install for the static version. You get the exact gradient you designed, not an approximation you rebuilt by hand.

An animated gradient background

A still mesh gradient already beats a flat one. An animated gradient background, drifting slowly behind your hero section, is the detail that makes a page feel alive.

For a background that moves in the browser, export the live React component and it renders the animation on the GPU. For a video background, or a gradient in a place that cannot run a shader (an email header, a social card, a slide), export it as an MP4 or WebP and drop the file in. Animated export and code export are Pro features; generating, tuning, and 1x PNG export are free, so you can design the whole thing before deciding.

One accessibility rule

If you put text on the gradient, check contrast. Gradients change luminance across the area, so text that passes on the light end can fail on the dark end. The safe move is a semi-transparent overlay behind the text:

<div className="relative min-h-screen bg-gradient-to-br from-indigo-500 to-pink-500">
  <div className="absolute inset-0 bg-black/30" />
  <h1 className="relative text-white">Ship something today</h1>
</div>

More on this in the accessible gradient guide.

FAQ

Can I do a mesh gradient in pure CSS? A rough static one, yes, with stacked radial-gradient layers. A smooth, grain-free, animated one needs GPU rendering (WebGL), which is why the generator exports a component instead of a CSS string.

Does the exported React component need a library? The static version is plain markup and styles with no dependency. The animated version renders on the GPU through the exported component.

What is a good free gradient generator for this? For a plain CSS gradient, any CSS gradient generator works. For a mesh gradient with export to a React component, CSS, or Tailwind, use the InstantGradient gradient maker: generate visually, tune, and copy the code.

Is it free? Generating, customizing, and 1x PNG export are free with no signup. Code export, 4K, and animated video (MP4/WebP) are Pro.