In this tutorial, we will how to use box shadow in react with material ui (mui 5). We will see box shadow, custom box shadow color, example with react material UI 5. Basically you can use box shadow using Paper component and sx prop.
Install & Setup Vite + React + Typescript + MUI 5
How to Use Box Shadow in React Material UI 5
1.react mui 5 box shadow with Paper component.
import { Box, Container, Paper } from "@mui/material";
export default function Shadow() {
return (
<>
<Container maxWidth="md" sx={{ mt: 20 }}>
<Box
sx={{
display: "flex",
flexWrap: "wrap",
"& > :not(style)": {
m: 1,
width: 128,
height: 128,
},
}}
>
<Paper elevation={0} />
<Paper />
<Paper elevation={3} />
<Paper elevation={4} />
<Paper elevation={5} />
<Paper elevation={6} />
<Paper elevation={8} />
<Paper elevation={12} />
<Paper elevation={16} />
<Paper elevation={24} />
</Box>
</Container>
</>
);
}
2 .react mui 5 box shadow using the sx prop.
import { Box, Container, Stack } from "@mui/material";
export default function Shadow() {
return (
<>
<Container maxWidth="md" sx={{ mt: 20 }}>
<Stack direction="row" spacing={4}>
<Box
sx={{
boxShadow: 0,
width: "6rem",
height: "2rem",
px: 4,
py: 2,
borderRadius: 2,
textAlign: "center",
}}
>
boxShadow: 0
</Box>
<Box
sx={{
boxShadow: 1,
width: "6rem",
height: "2rem",
px: 4,
py: 2,
borderRadius: 2,
textAlign: "center",
}}
>
boxShadow: 1
</Box>
<Box
sx={{
boxShadow: 2,
width: "6rem",
height: "2rem",
px: 4,
py: 2,
borderRadius: 2,
textAlign: "center",
}}
>
boxShadow: 2
</Box>
<Box
sx={{
boxShadow: 3,
width: "6rem",
height: "2rem",
px: 4,
py: 2,
borderRadius: 2,
textAlign: "center",
}}
>
boxShadow: 3
</Box>
</Stack>
</Container>
</>
);
}
3. react mui 5 custom box shadow & color shadow using the sx prop.
import { Box, Container, Stack } from "@mui/material";
export default function Shadow() {
return (
<>
<Container maxWidth="md" sx={{ mt: 20 }}>
<Stack direction="row" spacing={4}>
<Box
sx={{
boxShadow:
"rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset",
width: "6rem",
height: "2rem",
px: 4,
py: 2,
borderRadius: 2,
textAlign: "center",
}}
>
custom box shadow
</Box>
<Box
sx={{
boxShadow: "0 20px 50px rgba(8, 112, 184, 0.7)",
width: "6rem",
height: "2rem",
px: 4,
py: 2,
borderRadius: 2,
textAlign: "center",
}}
>
box shadow color
</Box>
<Box
sx={{
boxShadow: "rgba(7, 65, 210, 0.1) 0px 9px 30px",
width: "6rem",
height: "2rem",
px: 4,
py: 2,
borderRadius: 2,
textAlign: "center",
}}
>
light box shadow
</Box>
<Box
sx={{
boxShadow: "0 20px 50px rgba(240, 46, 170, 0.7)",
width: "6rem",
height: "2rem",
px: 4,
py: 2,
borderRadius: 2,
textAlign: "center",
}}
>
box shadow color
</Box>
</Stack>
</Container>
</>
);
}
Related Posts
create a chat ui in react with mui 5
create a blog section in react mui 5
create a footer in react mui 5
create a responsive navbar in react with mui 5
react mui 5 search bar example
react mui 5 login page example
react mui 5 image list example
react mui 5 registration form example
react mui 5 contact us page example
react mui 5 loading skeleton example
react mui 5 gradient button example
react mui 5 social media icons example
react mui 5 snackbar toast notification example
how to use autocomplete react mui 5
dynamically multiple input fields in react mui 5
how to use dropdown menu in react mui 5
how to use background image in react mui 5
how to use pricing table in react mui 5
how to use dark mode in react mui 5
how to use file upload in react mui 5
how to use sticky navbar in react mui 5
how to use multi step form in react mui 5
how to use loading button in react mui 5