To add the blur add this style to the Modal:

      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
        style={{ backdropFilter: "blur(5px)" }}
      >

and for the background color change the Box styles:

const style = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: 400,
  bgcolor: "background.paper", // Change to whatever color you want
  border: "2px solid #000",
  boxShadow: 24,
  p: 4
};

...

  return (
    <div>
      <Button onClick={handleOpen}>Open modal</Button>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
        style={{ backdropFilter: "blur(5px)" }}
      >
{/* Apply styles here: */}
        <Box sx={style}>
          <Typography id="modal-modal-title" variant="h6" component="h2">
            Text in a modal
          </Typography>
          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
          </Typography>
        </Box>
      </Modal>
    </div>
  );

For background color outside of modal change the stylings of the Modal:

style={{ backdropFilter: "blur(5px)", 
backgroundColor: "rgb(200, 0, 0, 0.5)" }}

Code sandbox

Using sx prop directly in Modal component :

<Modal
  sx={{ 
    "& > .MuiBackdrop-root" : {
            backdropFilter: "blur(2px)"
          }
    }}
  open={open}
  onClose={handleClose}
.
.
/>