How to add the linear-gradient background style with React and JavaScript?

Sometimes, we want to add the linear-gradient background style with React and JavaScript.

In this article, we’ll look at how to add the linear-gradient background style with React and JavaScript.

How to add the linear-gradient background style with React and JavaScript?

To add the linear-gradient background style with React and JavaScript, we can set the style in the style prop.

For instance, we write:

import React from "react";

const somePic = "https://picsum.photos/200/300";

export default function App() {
  return (
    <div>
      <div
        style={{
          background: `linear-gradient(190deg, #fa7c30 30%, rgba(0, 0, 0, 0)30%), url(${somePic})`,
          width: 200,
          height: 300
        }}
      ></div>
    </div>
  );
}

to set the background property to linear-gradient(190deg, #fa7c30 30%, rgba(0, 0, 0, 0)30%), url(${somePic}) to set the background of the div to a gradient with an image.

Conclusion

To add the linear-gradient background style with React and JavaScript, we can set the style in the style prop.