height: 150px;
background-color: pink;
background-image: linear-gradient(pink, blue);
}height: 150px;
background-color: pink;
background-image: linear-gradient(to right, pink, blue);
}height: 150px;
background-color: pink;
background-image: linear-gradient(to bottom right, pink, blue);
}height: 150px;
background-color: pink;
background-image: linear-gradient(90deg, pink, blue);
}height: 150px;
background-color: pink;
background-image: linear-gradient(red, pink, blue, yellow);
}height: 150px;
background-color: pink;
background-image: repeating-linear-gradient(red, pink 15%, blue 25%);
}background-image: radial-gradient(shape size at position, start-color, ..., last-color);
height: 200px;
width: 250px;
background-color: pink;
background-image: radial-gradient(red, pink, blue);
}height: 200px;
width: 250px;
background-color: pink;
background-image: radial-gradient(red 20%, pink 45%, blue 35%);
}height: 200px;
width: 250px;
background-color: pink;
background-image: radial-gradient(circle, red, pink, blue)
}height: 200px;
width: 250px;
background-color: pink;
background-image: radial-gradient(closest-side at 70% 65%, red, pink, blue);
}
#example2 {height: 200px;
width: 250px;
background-color: pink;
background-image: radial-gradient(farthest-side at 70% 65%, red, pink, blue);
}
#example3 {height: 200px;
width: 250px;
background-color: pink;
background-image: radial-gradient(closest-corner at 70% 65%, red, pink, blue);
}
#example4 {height: 200px;
width: 250px;
background-color: pink;
background-image: radial-gradient(farthest-corner at 70% 65%, red, pink, blue);
}height: 200px;
width: 250px;
background-color: pink;
background-image: repeating-radial-gradient(red, pink 15%, blue 30%);
}