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