How to Add a linear-gradient Background in a React Component?

Sometimes, we want to add a linear-gradient background in a React component.

In this article, we’ll look at how to add a linear-gradient background in a React component.

Add a linear-gradient Background in a React Component

To add a linear-gradient background in a React component, we can put the linear-gradient value in the style prop object.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <div>
      <div style={{ background: "linear-gradient(#e66465, #9198e5)" }}>
        hello world
      </div>
    </div>
  );
}

to set the background property to "linear-gradient(#e66465, #9198e5)".

Now we should see the linear gradient background on the div.

Conclusion

To add a linear-gradient background in a React component, we can put the linear-gradient value in the style prop object.