open-props/src/props.gradients.src.js

<div align="center">

 // const conicgradients = [
 //   {
 //     gradient: `conic-gradient(
 //         from 90deg at bottom right,
 //         cyan, 
 //         rebeccapurple
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from .5turn at bottom center,
 //         lightblue, 
 //         white
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from 90deg at 40% -25%,
 //         #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, 
 //         #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         at bottom left,
 //         deeppink, 
 //         cyan
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from 90deg at 25% -10%, 
 //         #ff4500, #d3f340, #7bee85, #afeeee, #7bee85
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -90deg at top left,
 //         black, 
 //         white
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         at top right,
 //         lime, 
 //         cyan
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -.5turn at bottom right,
 //         deeppink, 
 //         cyan,
 //         rebeccapurple
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         at top right,
 //         slategray, 
 //         white
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from .5turn at 50% 110%,
 //         white, 
 //         orange
 //       )`,
 //   },
 //   {
 //       gradient: `conic-gradient(
 //           from .5turn at center left,
 //           lime, 
 //           cyan
 //         )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -90deg at 50% -25%,
 //         blue, 
 //         blueviolet
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from .5turn at top right,
 //         darkseagreen, 
 //         darkslategray
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from 90deg at 50% 0%, 
 //         #111, 50%, #222, #111
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         at top right,
 //         lightcyan, 
 //         lightblue
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -135deg at -10% center,
 //         #ffa500, #ff7715, #ff522a, #ff3f47, #ff5482, #ff69b4
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -90deg at 50% 105%,
 //         white, 
 //         orchid
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -90deg at 25% 115%,
 //         #ff0000, #ff0066, #ff00cc, #cc00ff, #6600ff, 
 //         #0000ff, #0000ff, #0000ff, #0000ff
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -90deg at bottom center,
 //         papayawhip, 
 //         peachpuff
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -270deg at 50% -5%,
 //         yellow, 
 //         yellowgreen
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -90deg at 75% -25%,
 //         sienna, 
 //         purple
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from 90deg at 50% 125%, 
 //         #20b2aa, #135da5, #0d0895, #4b0082,
 //         #4b0082, #0d0895, #135da5, #20b2aa
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -270deg at 110% 50%,
 //         cadetblue, 
 //         darkgreen
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -270deg at 75% 110%,
 //         fuchsia, 
 //         floralwhite
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -270deg at 75% 110%,
 //         midnightblue, 
 //         lawngreen
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from .5turn at bottom left,
 //         deeppink,
 //         rebeccapurple
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from 90deg at 50% 125%, 
 //         #1f005c, #003298, #005ac6, #007fdc, #00a2d3, #00c4ae, 
 //         #00e474, #00ff00, #1f005c, #003298, #005ac6, #007fdc, 
 //         #00a2d3, #00c4ae, #00e474, #00ff00
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         at 0% 0%,
 //         snow, 
 //         white
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from .5turn at 0% 0%, 
 //         #00c476, 
 //         10%, 
 //         #82b0ff, 
 //         90%, 
 //         #00c476
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         at 125% 50%,
 //         #b78cf7, #ff7c94, #ffcf0d, #ff7c94, #b78cf7
 //       )`,
 //   },
 // ]

const linearURL = 'https://raw.githubusercontent.com/ghosh/uiGradients/master/gradients.json'
const uigradients = await(await fetch(linearURL)).json()

const linear = uigradients
  .slice(0, 30)
  .reduce((root, {colors}, i) =>
    root += `
    --gradient-${i+1}: linear-gradient(var(--op-gradient-direction),${colors.join(',')});`
  , ``)

 // const conic = conicgradients
 //   // .slice(0, 25)
 //   .reduce((root, {gradient}, i) =>
 //     root += `
 //     --conic-gradient-${i+1}: ${gradient
 //         .replace(/\s+/g, ' ')
 //         .trim()
 //         .replace(' from', 'from')
 //         .replace(' )', ')')
 //       };`
 //   , ``)

console.log(linear)
 // console.log(conic)