CSS gradients are typically one color that fades into another, but CSS allows you to control every aspect of how that happens, from the direction and the shape to the colors and how they transition from one to another. In fact, there are three types of gradients: linear<\/strong>, radial<\/strong>, and conic<\/strong>. Here’s the basic syntax for each one:<\/p>\n\n\n\n

\/* Basic linear CSS gradient examples *\/\nbackground-image: linear-gradient(#ff8a00, #e52e71);\nbackground-image: linear-gradient(to right, violet, darkred, purple);\nbackground-image: linear-gradient(40deg, rgb(255 0 0) 60%, orange);\n\n\/* Basic radial CSS gradient examples *\/\nbackground-image: radial-gradient(#ff8a00, #e52e71);\nbackground-image: radial-gradient(circle at top right, #ff8a00, red, #e52e71);\n\n\/* Basic conic CSS gradient examples *\/\nbackground-image: conic-gradient(#ff8a00, #e52e71);\nbackground-image: conic-gradient(red 50deg, yellow 100deg, lime 200deg, aqua, blue, magenta, red);<\/code><\/pre>\n\n\n\n\n\n\n\n