background gradient

radial gradient

Background gradient can be used to display a nice smooth transition between at least two colors.
The one above is the example of radial gradient - defined by its center and three colours.

#radialgradient {
    display: flex;
    flex-direction: column;
    border-radius: 7px;
    margin: 0 0em;
    min-height: 13em;
    align-items: center;
    align-content: center;
    text-align: center;
    background: rgb(2,0,36);
    background: radial-gradient(
        circle,
        rgba(2,0,36,1) 0%,
        rgba(9,9,121,1) 52%,
        rgba(0,212,255,1) 100%
    );
}

linear gradient

This is linear gradient - it's got a specific direction.
In this case, value 133deg tells us where it's heading, we specified three colours and opacity.

#lineargradient {
    display: flex;
    flex-direction: column;
    border-radius: 7px;
    margin: 0 0em;
    min-height: 13em;
    align-items: center;
    align-content: center;
    text-align: center;
    background-image: linear-gradient(
        133deg,
        #deadbeef 0%,
        #3fa8eb 51%,
        #2cb5fd 75%
    );
    opacity: 0.95;
}