How to create shadow effect on div in react js

How to create shadow effect on div in react js

Posted by Raquel Crist on July 11, 2022

How to create shadow effect on div in react js

How to create shadow effect on div in react js

Posted by Raquel Crist on July 11, 2022

Here is how you would create a shadow effect in React.

Inline styling:

export default class App extends Component {


    render() {

        const style = {
            boxShadow: "0 15px 35px rgb(50 50 93 / 10%)",
            padding:"4rem"
        }

        return (
           <div style={style}>Shadow effect</div>
        )
    }
}

or if your using a style sheet:

App.css

.box-shadow{
  box-shadow: 0 15px 35px rgb(50 50 93 / 10%);
  padding:4rem;
}

App.js

export default class App extends Component {


    render() {

        return (
           <div className="box-shadow">Shadow effect</div>
        )
    }
}

 

Hope this was helpful.