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