This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
You can create gradients with color transitions rotated around a center point, rather than radiating from the center, by using the conic-gradient() function.
There are many options to customize conic gradients.
Colors only
The simplest way to create a conic gradient is to pass a list of colors to the function.
div {
background-image: conic-gradient(aqua, fuchsia, salmon, aqua);
}Angle
By default, the gradient starts at 0 degrees and rotates clockwise.
div {
background-image: conic-gradient(aqua, fuchsia);
}You can pass an angle, preceded by the “from” keyword, to change the starting point.
div {
background-image: conic-gradient(from 90deg, aqua, fuchsia);
}Off-centered gradient
By default, the center pointer of the gradient is at the center of the element. You can change that by passing a length, percentage, or keyword.
Length
div {
background-image: conic-gradient(from 90deg at 4rem 4rem, aqua, fuchsia);
}Percentage
div {
background-image: conic-gradient(from 90deg at 25% 75%, aqua, fuchsia);
}Keywords
div {
background-image: conic-gradient(from 90deg at center left, aqua, fuchsia);
}Custom color stop positions
By default, color stops are placed halfway between the one that precedes it and the one that follows it, with color transitioning smoothly. The first is at 0deg and the last at 360deg.
The following two gradients are equivalent.
div {
background-image: conic-gradient(aqua, fuchsia, salmon, aqua);
background-image: conic-gradient(aqua 0deg, fuchsia 120deg, salmon 240deg, aqua 360deg);
}You can move the transitiom midpoint for any color.
div {
background-image: conic-gradient(aqua 0deg, fuchsia 80deg, salmon 130deg, aqua 360deg);
}You can pass a second color stop value to define where the color starts and stops.
div {
background-image: conic-gradient(aqua 0deg 50deg, fuchsia 80deg 100deg, salmon 130deg 140deg, aqua 360deg)
}If two or more colors are at the same location, there will be a hard line between the colors.
div {
background-image: conic-gradient(aqua 0deg 120deg, fuchsia 120deg 240deg, salmon 240deg 360deg);
}My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-10-24T00:00:00+00:00) Day 21: conic gradients. Retrieved from https://www.scien.cx/2022/10/24/day-21-conic-gradients-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.