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

Adding a gradient background in Next.js is straightforward once you know which styling approach your project uses. Whether you are working with global CSS, CSS Modules, Tailwind, or inline styles in JSX, the gradient value itself comes from the same place — this guide shows you how to get the CSS and where to put it in a Next.js project.

Step 1: Generate the Gradient CSS Value

Before touching Next.js code, build your gradient in the free CSS gradient generator. Pick your colours and angle, preview, and copy the linear-gradient() or radial-gradient() value from the output.

Example output: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%)

This is the value you will paste into your Next.js styles. The approach varies by how your project handles CSS.

Four Ways to Apply Gradient CSS in a Next.js Project

1. Global CSS (globals.css):

.hero-section { background: linear-gradient(135deg, #7c3aed, #2563eb); }

Import in _app.js or layout.tsx: import '../styles/globals.css'. Apply the class in your component: <section className="hero-section">.

2. CSS Modules:

In Hero.module.css: .hero { background: linear-gradient(135deg, #7c3aed, #2563eb); }

In your component: import styles from './Hero.module.css', then <section className={styles.hero}>.

3. Inline style in JSX:

<section style={{ background: 'linear-gradient(135deg, #7c3aed, #2563eb)' }}>

4. Tailwind CSS (most common in Next.js projects):

<section className="bg-gradient-to-br from-violet-600 to-blue-600">

For custom colours outside the Tailwind palette, use arbitrary values: from-[#7c3aed] to-[#2563eb], or add the value to your tailwind.config.js under extend.backgroundImage.

Sell Custom Apparel — We Handle Printing & Free Shipping

Adding a Custom Gradient to Tailwind Config in Next.js

For a gradient you use in multiple places, define it as a named utility in tailwind.config.js:

module.exports = { theme: { extend: { backgroundImage: { 'brand-gradient': 'linear-gradient(135deg, #7c3aed, #2563eb)', 'hero-gradient': 'linear-gradient(to bottom, #0f172a, #1e1b4b)', } } } }

Now use it anywhere: className="bg-brand-gradient". Generate the gradient value in the free CSS gradient generator, paste it into the config, and reference it with a semantic name throughout your components.

Server Components and Gradient CSS in Next.js App Router

CSS gradients work identically in server components and client components. Gradient values are static CSS — no JavaScript or browser interaction needed. Server components with CSS classes, inline styles, or Tailwind classes all render the gradient correctly on the server and hydrate without issues.

If your gradient is dynamic (changes based on user data or state), move that component to a client component with "use client" at the top, and handle the dynamic value in a state variable or derived style object.

Frequently Asked Questions

Can I use CSS variables for gradients in Next.js?

Yes. Define CSS custom properties in globals.css or as inline style on the root layout. Reference them with var() in any component or module stylesheet.

Does server-side rendering affect how gradients look?

No. CSS gradients are resolved by the browser, not the server. SSR sends the HTML and CSS to the client; the browser renders the gradient. The result is identical whether rendered on the server or client.

Should I use Tailwind gradient classes or plain CSS in Next.js?

If your project uses Tailwind, use Tailwind gradient classes for consistency. If you need a gradient outside the Tailwind preset, add it to tailwind.config.js as a named backgroundImage value rather than mixing Tailwind and raw CSS inline styles.