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.

Any question?
This field is required
Your question have been successfully submitted and will be reviewed before published
Please login to ask a question