Day 21: conic gradients

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


This content originally appeared on Manuel Matuzović - Web development 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);  
}


This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate Updates
APA

Manuel Matuzović | Sciencx (2022-10-24T09:38:54+00:00) Day 21: conic gradients. Retrieved from https://www.scien.cx/2022/10/24/day-21-conic-gradients/

MLA
" » Day 21: conic gradients." Manuel Matuzović | Sciencx - Monday October 24, 2022, https://www.scien.cx/2022/10/24/day-21-conic-gradients/
HARVARD
Manuel Matuzović | Sciencx Monday October 24, 2022 » Day 21: conic gradients., viewed ,<https://www.scien.cx/2022/10/24/day-21-conic-gradients/>
VANCOUVER
Manuel Matuzović | Sciencx - » Day 21: conic gradients. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/24/day-21-conic-gradients/
CHICAGO
" » Day 21: conic gradients." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/10/24/day-21-conic-gradients/
IEEE
" » Day 21: conic gradients." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/10/24/day-21-conic-gradients/. [Accessed: ]
rf:citation
» Day 21: conic gradients | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/10/24/day-21-conic-gradients/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts