React.js CSS Gradient Background — How to Add Gradients in React (Free)

Adding a CSS gradient background in React.js is straightforward — but the right approach depends on how your project handles styles. Inline styles, CSS Modules, styled-components, and Tailwind all work slightly differently. This guide covers each approach with copy-paste examples, and the free CSS gradient generator provides the values to plug in.

React.js (Web) vs React Native — Important Distinction

React.js (web) and React Native use completely different gradient systems. This guide covers React.js web applications — standard browser-based React.

In React.js web, CSS gradients work exactly as in any HTML/CSS project. You use the standard background: linear-gradient() CSS property, applied via inline styles, class names, or CSS-in-JS libraries.

React Native does not support CSS gradients natively — it requires a library like expo-linear-gradient or react-native-linear-gradient, which use the device's native graphics layer. If you are building a React Native app, see the separate React Native gradient guide.

Four Ways to Apply CSS Gradient Backgrounds in React.js

1. Inline style in JSX:

function Hero() {
return (
<section style={{ background: 'linear-gradient(135deg, #7c3aed, #2563eb)' }}>
<h1>Hello</h1>
</section>
);
}

2. CSS Module:

In Hero.module.css: .hero { background: linear-gradient(135deg, #7c3aed, #2563eb); }
In component: import styles from './Hero.module.css';
<section className={styles.hero}>

3. styled-components:

const Hero = styled.section`background: linear-gradient(135deg, #7c3aed, #2563eb);`;

4. Tailwind CSS in React:

<section className="bg-gradient-to-br from-violet-600 to-blue-600">
Or with custom values: from-[#7c3aed] to-[#2563eb]

Sell Custom Apparel — We Handle Printing & Free Shipping

Dynamic Gradient Backgrounds Using React State

React's state system makes dynamic gradients clean to implement:

function GradientCard({ primaryColor, secondaryColor }) {
const gradient = {
background: `linear-gradient(135deg, ${primaryColor}, ${secondaryColor})`
};
return <div style={gradient}>...</div>;
}

Pass colour values as props, derive them from API data, or let users pick them with a colour input. The gradient updates reactively whenever the values change. Use useMemo if the parent re-renders frequently and the gradient calculation needs optimisation (though for simple string interpolation this is rarely necessary).

Generating Gradient Values to Use in React (Free)

Open the free CSS gradient generator, build your gradient visually, and copy the output. The generator produces the complete linear-gradient() string — paste it directly into whichever approach you are using:

• Inline style: wrap in single quotes inside the style object
• CSS Module: paste after background: in the class definition
• styled-components: paste directly inside the template literal
• Tailwind with arbitrary values: extract the hex colours and use from-[#hex1] to-[#hex2]

The generator is faster than hand-coding radial or multi-stop gradients — especially useful when you need to fine-tune stop positions visually rather than by adjusting numbers in code.

Frequently Asked Questions

Can I use CSS gradients in a React server component?

Yes. CSS gradient values in inline styles, CSS Modules, or class names work in both server and client components. Gradient rendering is handled by the browser, not the server.

How do I animate a gradient background in React?

You cannot CSS-transition between two gradient values directly. Instead, apply a CSS animation in your stylesheet (keyframes with background-position on a larger background-size) and add the class to the element. Alternatively, use a CSS animation library like Framer Motion to animate overlay opacity between two gradient layers.

Which approach is best for a large React codebase?

CSS Modules or a design token system (CSS custom properties) for consistency and maintainability. Inline styles work for one-off dynamic gradients. styled-components or Emotion are good choices if your project already uses CSS-in-JS.