Gradients in CSS Don't Work for Me in React

Question

I have tried to make gradients in css with react but it doesn't work. Is there any way to do this?

body {
    background: #0f0c29;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #24243e, #302b63, #0f0c29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

I am using this style to make a background gradient, but the page always appears blank as if the gradient was not applied.

Answer 1

I had this issue before.

It's probably b/c ur App.js is empty.

Try adding a simple text.

//App.js

import './index.css'; 

function App() {
  return (
    <div className='App'>
      lorem ipsum
    </div>
  );
}

export default App;

//index.css

body {
    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
}

Now it should work.