Para agregar el desenfoque, agregue este estilo al Modal:

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

y para el color de fondo cambie los estilos de Caja:

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

Para el color de fondo fuera del modal, cambie los estilos del Modal:

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

zona de pruebas de código

Usando sx prop directamente en el componente Modal:

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