CSS Conic Gradient Example


SUBMITTED BY: everettsnyder

DATE: April 28, 2020, 12:11 p.m.

FORMAT: CSS

SIZE: 1.0 kB

HITS: 528

  1. conic-gradient() = conic-gradient(
  2. [ from <angle> ]? [ at <position> ]?,
  3. <angular-color-stop-list>
  4. )
  5. .conic-gradient {
  6. background: conic-gradient(#fff, #000);
  7. }
  8. .conic-gradient {
  9. /* Original example */
  10. background-image: conic-gradient(#fff, #000);
  11. /* Explicitly state the location center point */
  12. background: conic-gradient(at 50% 50%, #fff, #000);
  13. /* Explicitly state the angle of the start color */
  14. background: conic-gradient(from 0deg, #fff, #000);
  15. /* Explicitly state the angle of the start color and center point location */
  16. background: conic-gradient(from 0deg at center, #fff, #000);
  17. /* Explicitly state the angles of both colors as percentages instead of degrees */
  18. background: conic-gradient(#fff 0%, #000 100%);
  19. /* Explicitly state the angle of the starting color in degrees and the ending color by a full turn of the circle */
  20. background: conic-gradient(#fff 0deg, #000 1turn);
  21. }

comments powered by Disqus