So I want a smooth transition from my background into white on the top and bottom of the box, like in the example screenshot.

Currently it looks like this: The top and bottom of the box is filled with the background until the end of the box

What I want is this: A smooth transition from the BG color into white at the end of the box on top and bottom

The background I use is background: 'transparent linear-gradient(111deg, #FFFFFF76 0%, #6A724645 100%) 0% 0% no-repeat padding-box',

Do you know how can I achieve that?

Thats the About component:

import React from 'react';
import Typography from '@mui/material/Typography';
import { Box } from '@mui/material';

const styles = {
    wrapper: {
        pt: 7,
        pb: 7,
        pr: '10vw',
        pl: '10vw',
    },
    text: {
        mt: 3,
        mb: 5,
        pr: '10vw',
        pl: '10vw',
    },
};

function About() {
    return (
        <Box sx={styles.wrapper}>
            <Typography variant={'h5'} sx={{ textAlign: 'center' }}>
                About Us
            </Typography>
            <Box sx={styles.text}>
                <Typography variant={'h6'} sx={{ textAlign: 'center' }}>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </Typography>
            </Box>
        </Box>
    );
}
export { About };

Then I am rendering it in the App:

import React from 'react';
import { About } from 'components/Body';
import { Box, Container } from '@mui/material';

const styles = {
    container: {
        background: 'white',
        display: 'flex',
        flexDirection: 'column',
        minWidth: '100%',
        minHeight: '100%',
    },
    header: {
        p: 0,
        m: 0,
        background: 'transparent linear-gradient(111deg, #FFFFFF76 0%, #6A724645 100%) 0% 0% no-repeat padding-box',
        minWidth: '100%',
    },
};

function App() {
    return (
        <Container disableGutters sx={styles.container}>
            <Box sx={styles.header}>
                <About />
            </Box>
        </Container>
    );
}

export { App };

CodePudding user response：

Maybe this is what you are looking for:

background: "linear-gradient(180deg, transparent 0%, #FFFFFF76 20%, #6A724645 50%, #FFFFFF76 80%, transparent 100%)"

Please let me know if it helps