Linear gradient We will speak only about linear gradient here, but there are more: Linear gradient (goes down/up/left/right/diagonally) Radial gradient (defined by their center) Conic gradient (rotated around a center point) Gradient is an image, not a color. We can assign it to background-image: linear-gradient(red, green) . CSS is smart enough to understand if you declare gradient to a shorthand background: linear-gradient(red, green) . From top to bottom By default the gradient line goes from the top to the bottom. Prev. example looks like. background: linear-gradient(red, green) From top to right We can specify the direction of the gradient line. background: linear-gradient(to top right, red, green) Angle direction Or use an angle. Line goes through the center of the box. The colors of the gradient are determined by several points. Start & end points are defined by the intersection the line with a perpendiculars from the box corners. Start & end points are symmetrical from center. background: linear-gradient(0deg, red, green) Or use an angle. Note that as far as the div shape is not square, the line doesn't go diagonally. Or use an angle. Note that as far as the div shape is not square, the line doesn't go diagonally. background: linear-gradient(45deg, red, green) Multiple colors We can have multiple comma separated colors. background: linear-gradient(red, white, green) Color start point You can set a start point for a color. background: linear-gradient(to right, red 0%, white 10%, green 50%); Fixed background Background image can span across the whole container or can be fixed. Check the difference. Text gradient const MacBook = () => ( <div css={style}> <h1 css={{ fontSize: '70px', padding: '20px', background: 'linear-gradient(to right, rgb(67, 124, 205), rgb(69, 214, 202))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }} > MacBook </h1> </div> )