How to Use Box Shadow in React MUI 5

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>
    </>
  );
}

mui 5 box shadow

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>
    </>
  );
}

mui 5 box shadow with sx prop

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>
    </>
  );
}

mui 5 custom box shadow & color shadow

4.React MUI 5 Interactive Card with Dynamic Box Shadow

import { Card, CardContent, Typography } from '@mui/material';

export default function ShadowCard() {
  return (
    <Card 
      sx={{
        maxWidth: 345,
        boxShadow: 2,
        transition: 'box-shadow 0.3s', // Smooth transition for the shadow
        '&:hover': {
          boxShadow: 8, // Shadow on hover
        },
      }}
    >
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          Interactive Card
        </Typography>
        <Typography variant="body2" color="text.secondary">
          Hover over me to see the shadow change!
        </Typography>
      </CardContent>
    </Card>
  );
}