How to use free gradient backgrounds in React and Tailwind CSS

How do I export a React gradient component?

Choose a gradient and colour variation, open Export and select React. Download or copy the JSX component into your project, then import and render it. The component accepts props and a style object. Native designs use CSS gradients; complex artwork is embedded as an SVG data URL. Review the generated code and adapt its default full-height layout to your component.

Can I use Copy CSS with JSX instead?

Yes. Use a gallery card’s CSS button or the CSS tab in Export. Paste the complete copied rule into your stylesheet and put its generated class name on your JSX element. Give the element height or padding. This workflow is useful when you already have a hero or card component and only want to replace its background.

How do I combine the gradient with Tailwind utilities?

Put the background declarations in a normal CSS class and use that class alongside Tailwind utilities in className. The example below keeps the background separate from the layout. Replace the sample background with Copy CSS output for your chosen library design. Avoid a second background utility that overrides the same CSS properties.

What should I check before shipping?

For textured CSS, keep the referenced artwork URL available or self-host the artwork and update its path. Native gradients do not need an image request. Test the final text contrast and mobile crop. A gradient is decorative: keep meaningful copy and controls as accessible HTML elements above it.

A working starting point

This example shows the integration pattern. Use a gradient’s Copy CSS or Export controls for its actual artwork.

/* Your app stylesheet */
.gradient-surface {
  background-color: #172554;
  background-image: linear-gradient(135deg, #172554, #6d28d9);
  background-size: cover;
  background-position: center;
}

// Your React component (with Tailwind configured)
export default function Hero() {
  return (
    <section className="gradient-surface min-h-96 p-8 md:p-16">
      <div className="rounded-xl bg-slate-950 p-6 text-white">
        <h1>Your next idea</h1>
      </div>
    </section>
  );
}