shadows.js

export const base = {
  id: -1,
  name: "base",
  inset: false,
  offsetX: 0,
  offsetY: "2px",
  blur: "8px",
  spread: 0,
  color: "50 50 50",
  opacity: 8,
};

export const collection = [
  // None
  {
    id: 0,
    name: "none",
    inset: false,
    offsetX: 0,
    offsetY: 0,
    blur: 0,
    spread: 0,
    color: "0 0 0",
    opacity: 0,
  },
  // Elevation
  {
    id: 1,
    name: "el-1",
    inset: false,
    offsetX: 0,
    offsetY: "2px",
    blur: "1px",
    spread: "-1px",
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 2,
    name: "el-2",
    inset: false,
    offsetX: 0,
    offsetY: "3px",
    blur: "1px",
    spread: "-1px",
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 3,
    name: "el-3",
    inset: false,
    offsetX: 0,
    offsetY: "4px",
    blur: "4px",
    spread: "-2px",
    color: "150 150 150",
    opacity: 20,
  },
  {
    id: 4,
    name: "el-4",
    inset: false,
    offsetX: 0,
    offsetY: "4px",
    blur: "6px",
    spread: "-2px",
    color: "150 150 150",
    opacity: 20,
  },
  {
    id: 5,
    name: "el-5",
    inset: false,
    offsetX: 0,
    offsetY: "6px",
    blur: "8px",
    spread: "-2px",
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 6,
    name: "el-6",
    inset: false,
    offsetX: 0,
    offsetY: "10px",
    blur: "10px",
    spread: "-4px",
    color: "150 150 150",
    opacity: 16,
  },
  {
    id: 7,
    name: "el-7",
    inset: false,
    offsetX: 0,
    offsetY: "14px",
    blur: "14px",
    spread: "-4px",
    color: "150 150 150",
    opacity: 16,
  },
  {
    id: 8,
    name: "el-8",
    inset: false,
    offsetX: 0,
    offsetY: "6px",
    blur: "9px",
    spread: 0,
    color: "150 150 150",
    opacity: 16,
  },
  {
    id: 9,
    name: "el-9",
    inset: false,
    offsetX: 0,
    offsetY: "6px",
    blur: "18px",
    spread: 0,
    color: "150 150 150",
    opacity: 16,
  },
  {
    id: 10,
    name: "el-10",
    inset: false,
    offsetX: 0,
    offsetY: "6px",
    blur: "20px",
    spread: 0,
    color: "150 150 150",
    opacity: 20,
  },
  {
    id: 11,
    name: "el-11",
    inset: false,
    offsetX: 0,
    offsetY: "12px",
    blur: "24px",
    spread: 0,
    color: "150 150 150",
    opacity: 28,
  },
  {
    id: 12,
    name: "el-12",
    inset: false,
    offsetX: 0,
    offsetY: "20px",
    blur: "24px",
    spread: 0,
    color: "150 150 150",
    opacity: 30,
  },
  {
    id: 13,
    name: "el-13",
    inset: false,
    offsetX: 0,
    offsetY: "28px",
    blur: "30px",
    spread: "-12px",
    color: "150 150 150",
    opacity: 32,
  },
  {
    id: 14,
    name: "el-14",
    inset: false,
    offsetX: 0,
    offsetY: "28px",
    blur: "30px",
    spread: "-6px",
    color: "150 150 150",
    opacity: 36,
  },
  {
    id: 15,
    name: "el-15",
    inset: false,
    offsetX: 0,
    offsetY: "28px",
    blur: "30px",
    spread: "-2px",
    color: "150 150 150",
    opacity: 36,
  },
  {
    id: 16,
    name: "el-16",
    inset: false,
    offsetX: 0,
    offsetY: "36px",
    blur: "40px",
    spread: "-2px",
    color: "150 150 150",
    opacity: 42,
  },
  {
    id: 17,
    name: "el-17",
    inset: false,
    offsetX: 0,
    offsetY: "36px",
    blur: "40px",
    spread: 0,
    color: "150 150 150",
    opacity: 42,
  },
  {
    id: 18,
    name: "el-18",
    inset: false,
    offsetX: 0,
    offsetY: "36px",
    blur: "40px",
    spread: 0,
    color: "150 150 150",
    opacity: 42,
  },
  {
    id: 19,
    name: "el-19",
    inset: false,
    offsetX: 0,
    offsetY: "40px",
    blur: "48px",
    spread: 0,
    color: "150 150 150",
    opacity: 42,
  },
  {
    id: 20,
    name: "el-20",
    inset: false,
    offsetX: 0,
    offsetY: "42px",
    blur: "48px",
    spread: 0,
    color: "150 150 150",
    opacity: 48,
  },
  {
    id: 21,
    name: "el-21",
    inset: false,
    offsetX: 0,
    offsetY: "48px",
    blur: "48px",
    spread: 0,
    color: "150 150 150",
    opacity: 48,
  },
  {
    id: 22,
    name: "el-22",
    inset: false,
    offsetX: 0,
    offsetY: "48px",
    blur: "52px",
    spread: 0,
    color: "150 150 150",
    opacity: 48,
  },
  {
    id: 23,
    name: "el-23",
    inset: false,
    offsetX: 0,
    offsetY: "48px",
    blur: "60px",
    spread: 0,
    color: "150 150 150",
    opacity: 48,
  },
  {
    id: 24,
    name: "el-24",
    inset: false,
    offsetX: 0,
    offsetY: "48px",
    blur: "64px",
    spread: 0,
    color: "150 150 150",
    opacity: 52,
  },
  //   Borders
  {
    id: 25,
    name: "bd-1",
    inset: false,
    offsetX: 0,
    offsetY: 0,
    blur: 0,
    spread: "1px",
    color: "160 167 186",
    opacity: 20,
  },
  {
    id: 26,
    name: "bd-2",
    inset: false,
    offsetX: 0,
    offsetY: 0,
    blur: 0,
    spread: "2px",
    color: "160 167 186",
    opacity: 20,
  },
  {
    id: 27,
    name: "bd-3",
    inset: false,
    offsetX: 0,
    offsetY: 0,
    blur: 0,
    spread: "4px",
    color: "160 167 186",
    opacity: 20,
  },
  {
    id: 28,
    name: "bd-4",
    inset: false,
    offsetX: 0,
    offsetY: 0,
    blur: 0,
    spread: "6px",
    color: "160 167 186",
    opacity: 20,
  },
  {
    id: 29,
    name: "bd-5",
    inset: false,
    offsetX: 0,
    offsetY: 0,
    blur: 0,
    spread: "8px",
    color: "160 167 186",
    opacity: 20,
  },
  {
    id: 30,
    name: "bd-6",
    inset: false,
    offsetX: 0,
    offsetY: 0,
    blur: 0,
    spread: "12px",
    color: "160 167 186",
    opacity: 20,
  },
  // Neumorphism
  {
    id: 31,
    name: "neu-1",
    multiple: [
      {
        inset: false,
        offsetX: "5px",
        offsetY: "5px",
        blur: "10px",
        spread: 0,
        color: "160 167 186",
        opacity: 40,
      },
      {
        inset: false,
        offsetX: "-5px",
        offsetY: "-5px",
        blur: "10px",
        spread: 0,
        color: "255 255 255",
        opacity: 100,
      },
    ],
  },
  {
    id: 32,
    name: "neu-1-i",
    multiple: [
      {
        inset: true,
        offsetX: "5px",
        offsetY: "5px",
        blur: "10px",
        spread: 0,
        color: "160 167 186",
        opacity: 30,
      },
      {
        inset: true,
        offsetX: "-5px",
        offsetY: "-5px",
        blur: "10px",
        spread: 0,
        color: "255 255 255",
        opacity: 100,
      },
    ],
  },
  {
    id: 33,
    name: "neu-1-io",
    multiple: [
      {
        inset: false,
        offsetX: "-5px",
        offsetY: "-5px",
        blur: "10px",
        spread: 0,
        color: "255 255 255",
        opacity: 50,
      },
      {
        inset: false,
        offsetX: "5px",
        offsetY: "5px",
        blur: "10px",
        spread: 0,
        color: "160 167 186",
        opacity: 30,
      },
      {
        inset: true,
        offsetX: "-5px",
        offsetY: "-5px",
        blur: "10px",
        spread: 0,
        color: "255 255 255",
        opacity: 50,
      },
      {
        inset: true,
        offsetX: "5px",
        offsetY: "5px",
        blur: "10px",
        spread: 0,
        color: "160 167 186",
        opacity: 30,
      },
    ],
  },
  {
    id: 34,
    name: "neu-2",
    multiple: [
      {
        inset: false,
        offsetX: "10px",
        offsetY: "10px",
        blur: "20px",
        spread: 0,
        color: "160 167 186",
        opacity: 40,
      },
      {
        inset: false,
        offsetX: "-10px",
        offsetY: "-10px",
        blur: "20px",
        spread: 0,
        color: "255 255 255",
        opacity: 100,
      },
    ],
  },
  {
    id: 35,
    name: "neu-2-i",
    multiple: [
      {
        inset: true,
        offsetX: "10px",
        offsetY: "10px",
        blur: "20px",
        spread: 0,
        color: "160 167 186",
        opacity: 30,
      },
      {
        inset: true,
        offsetX: "-10px",
        offsetY: "-10px",
        blur: "20px",
        spread: 0,
        color: "255 255 255",
        opacity: 100,
      },
    ],
  },
  {
    id: 36,
    name: "neu-2-io",
    multiple: [
      {
        inset: false,
        offsetX: "-10px",
        offsetY: "-10px",
        blur: "15px",
        spread: 0,
        color: "255 255 255",
        opacity: 50,
      },
      {
        inset: false,
        offsetX: "10px",
        offsetY: "10px",
        blur: "15px",
        spread: 0,
        color: "160 167 186",
        opacity: 30,
      },
      {
        inset: true,
        offsetX: "-10px",
        offsetY: "-10px",
        blur: "15px",
        spread: 0,
        color: "255 255 255",
        opacity: 50,
      },
      {
        inset: true,
        offsetX: "10px",
        offsetY: "10px",
        blur: "15px",
        spread: 0,
        color: "160 167 186",
        opacity: 30,
      },
    ],
  },
  {
    id: 37,
    name: "neu-3",
    multiple: [
      {
        inset: false,
        offsetX: "20px",
        offsetY: "20px",
        blur: "40px",
        spread: 0,
        color: "160 167 186",
        opacity: 50,
      },
      {
        inset: false,
        offsetX: "-20px",
        offsetY: "-20px",
        blur: "40px",
        spread: 0,
        color: "255 255 255",
        opacity: 100,
      },
    ],
  },
  {
    id: 38,
    name: "neu-3-i",
    multiple: [
      {
        inset: true,
        offsetX: "20px",
        offsetY: "20px",
        blur: "40px",
        spread: 0,
        color: "160 167 186",
        opacity: 50,
      },
      {
        inset: true,
        offsetX: "-20px",
        offsetY: "-20px",
        blur: "40px",
        spread: 0,
        color: "255 255 255",
        opacity: 100,
      },
    ],
  },
  {
    id: 39,
    name: "neu-3-io",
    multiple: [
      {
        inset: false,
        offsetX: "-20px",
        offsetY: "-20px",
        blur: "40px",
        spread: 0,
        color: "255 255 255",
        opacity: 50,
      },
      {
        inset: false,
        offsetX: "20px",
        offsetY: "20px",
        blur: "40px",
        spread: 0,
        color: "160 167 186",
        opacity: 50,
      },
      {
        inset: true,
        offsetX: "-20px",
        offsetY: "-20px",
        blur: "40px",
        spread: 0,
        color: "255 255 255",
        opacity: 50,
      },
      {
        inset: true,
        offsetX: "20px",
        offsetY: "20px",
        blur: "40px",
        spread: 0,
        color: "160 167 186",
        opacity: 50,
      },
    ],
  },
  // Axis x
  {
    id: 40,
    name: "ax-1",
    multiple: [
      {
        inset: false,
        offsetX: "6px",
        offsetY: 0,
        blur: "12px",
        spread: "-12px",
        color: "160 167 186",
        opacity: 75,
      },
      {
        inset: false,
        offsetX: "-6px",
        offsetY: 0,
        blur: "12px",
        spread: "-12px",
        color: "160 167 186",
        opacity: 75,
      },
    ],
  },
  {
    id: 41,
    name: "ax-2",
    multiple: [
      {
        inset: false,
        offsetX: "8px",
        offsetY: 0,
        blur: "16px",
        spread: "-16px",
        color: "160 167 186",
        opacity: 75,
      },
      {
        inset: false,
        offsetX: "-8px",
        offsetY: 0,
        blur: "16px",
        spread: "-16px",
        color: "160 167 186",
        opacity: 75,
      },
    ],
  },
  {
    id: 42,
    name: "ax-3",
    multiple: [
      {
        inset: false,
        offsetX: "12px",
        offsetY: 0,
        blur: "12px",
        spread: "-16px",
        color: "160 167 186",
        opacity: 75,
      },
      {
        inset: false,
        offsetX: "-12px",
        offsetY: 0,
        blur: "12px",
        spread: "-16px",
        color: "160 167 186",
        opacity: 75,
      },
    ],
  },
  {
    id: 43,
    name: "ax-4",
    multiple: [
      {
        inset: false,
        offsetX: "12px",
        offsetY: 0,
        blur: "16px",
        spread: "-16px",
        color: "160 167 186",
        opacity: 75,
      },
      {
        inset: false,
        offsetX: "-12px",
        offsetY: 0,
        blur: "16px",
        spread: "-16px",
        color: "160 167 186",
        opacity: 75,
      },
    ],
  },
  {
    id: 44,
    name: "ax-5",
    multiple: [
      {
        inset: false,
        offsetX: "16px",
        offsetY: 0,
        blur: "24px",
        spread: "-24px",
        color: "160 167 186",
        opacity: 75,
      },
      {
        inset: false,
        offsetX: "-16px",
        offsetY: 0,
        blur: "24px",
        spread: "-24px",
        color: "160 167 186",
        opacity: 75,
      },
    ],
  },
  {
    id: 45,
    name: "ax-6",
    multiple: [
      {
        inset: false,
        offsetX: "24px",
        offsetY: 0,
        blur: "32px",
        spread: "-32px",
        color: "160 167 186",
        opacity: 75,
      },
      {
        inset: false,
        offsetX: "-24px",
        offsetY: 0,
        blur: "32px",
        spread: "-32px",
        color: "160 167 186",
        opacity: 75,
      },
    ],
  },
  //   Axis y
  {
    id: 46,
    name: "ay-1",
    multiple: [
      {
        inset: false,
        offsetX: 0,
        offsetY: "6px",
        blur: "12px",
        spread: "-12px",
        color: "160 167 186",
        opacity: 75,
      },
      {
        inset: false,
        offsetX: 0,
        offsetY: "-6px",
        blur: "12px",
        spread: "-12px",
        color: "160 167 186",
        opacity: 75,
      },
    ],
  },
  {
    id: 47,
    name: "ay-2",
    multiple: [
      {
        inset: false,
        offsetX: 0,
        offsetY: "8px",
        blur: "16px",
        spread: "-16px",
        color: "160 167 186",
        opacity: 75,
      },
      {
        inset: false,
        offsetX: 0,
        offsetY: "-8px",
        blur: "16px",
        spread: "-16px",
        color: "160 167 186",
        opacity: 75,
      },
    ],
  },
  {
    id: 48,
    name: "ay-3",
    multiple: [
      {
        inset: false,
        offsetX: 0,
        offsetY: "12px",
        blur: "12px",
        spread: "-16px",
        color: "160 167 186",
        opacity: 75,
      },
      {
        inset: false,
        offsetX: 0,
        offsetY: "-12px",
        blur: "12px",
        spread: "-16px",
        color: "160 167 186",
        opacity: 75,
      },
    ],
  },
  {
    id: 49,
    name: "ay-4",
    multiple: [
      {
        inset: false,
        offsetX: 0,
        offsetY: "12px",
        blur: "16px",
        spread: "-16px",
        color: "160 167 186",
        opacity: 75,
      },
      {
        inset: false,
        offsetX: 0,
        offsetY: "-12px",
        blur: "16px",
        spread: "-16px",
        color: "160 167 186",
        opacity: 75,
      },
    ],
  },
  {
    id: 50,
    name: "ay-5",
    multiple: [
      {
        inset: false,
        offsetX: 0,
        offsetY: "16px",
        blur: "24px",
        spread: "-24px",
        color: "160 167 186",
        opacity: 75,
      },
      {
        inset: false,
        offsetX: 0,
        offsetY: "-16px",
        blur: "24px",
        spread: "-24px",
        color: "160 167 186",
        opacity: 75,
      },
    ],
  },
  {
    id: 51,
    name: "ay-6",
    multiple: [
      {
        inset: false,
        offsetX: 0,
        offsetY: "24px",
        blur: "32px",
        spread: "-32px",
        color: "160 167 186",
        opacity: 75,
      },
      {
        inset: false,
        offsetX: 0,
        offsetY: "-24px",
        blur: "32px",
        spread: "-32px",
        color: "160 167 186",
        opacity: 75,
      },
    ],
  },
  // Small inner side
  {
    id: 52,
    name: "si-1",
    multiple: [
      {
        inset: true,
        offsetX: 0,
        offsetY: "5px",
        blur: "20px",
        spread: 0,
        color: "160 167 186",
        opacity: 10,
      },
      {
        inset: true,
        offsetX: 0,
        offsetY: "2px",
        blur: 0,
        spread: 0,
        color: "160 167 186",
        opacity: 40,
      },
    ],
  },
  {
    id: 53,
    name: "si-2",
    multiple: [
      {
        inset: true,
        offsetX: 0,
        offsetY: "5px",
        blur: "20px",
        spread: 0,
        color: "160 167 186",
        opacity: 10,
      },
      {
        inset: true,
        offsetX: 0,
        offsetY: "-2px",
        blur: 0,
        spread: 0,
        color: "160 167 186",
        opacity: 40,
      },
    ],
  },
  {
    id: 54,
    name: "si-3",
    multiple: [
      {
        inset: true,
        offsetX: 0,
        offsetY: "5px",
        blur: "20px",
        spread: 0,
        color: "160 167 186",
        opacity: 10,
      },
      {
        inset: true,
        offsetX: "2px",
        offsetY: 0,
        blur: 0,
        spread: 0,
        color: "160 167 186",
        opacity: 40,
      },
    ],
  },
  {
    id: 55,
    name: "si-4",
    multiple: [
      {
        inset: true,
        offsetX: 0,
        offsetY: "5px",
        blur: "20px",
        spread: 0,
        color: "160 167 186",
        opacity: 10,
      },
      {
        inset: true,
        offsetX: "-2px",
        offsetY: 0,
        blur: 0,
        spread: 0,
        color: "160 167 186",
        opacity: 40,
      },
    ],
  },
  // Medium inner side
  {
    id: 56,
    name: "mi-1",
    multiple: [
      {
        inset: true,
        offsetX: 0,
        offsetY: "5px",
        blur: "20px",
        spread: 0,
        color: "160 167 186",
        opacity: 10,
      },
      {
        inset: true,
        offsetX: 0,
        offsetY: "4px",
        blur: 0,
        spread: 0,
        color: "160 167 186",
        opacity: 40,
      },
    ],
  },
  {
    id: 57,
    name: "mi-2",
    multiple: [
      {
        inset: true,
        offsetX: 0,
        offsetY: "5px",
        blur: "20px",
        spread: 0,
        color: "160 167 186",
        opacity: 10,
      },
      {
        inset: true,
        offsetX: 0,
        offsetY: "-4px",
        blur: 0,
        spread: 0,
        color: "160 167 186",
        opacity: 40,
      },
    ],
  },
  {
    id: 58,
    name: "mi-3",
    multiple: [
      {
        inset: true,
        offsetX: 0,
        offsetY: "5px",
        blur: "20px",
        spread: 0,
        color: "160 167 186",
        opacity: 10,
      },
      {
        inset: true,
        offsetX: "4px",
        offsetY: 0,
        blur: 0,
        spread: 0,
        color: "160 167 186",
        opacity: 40,
      },
    ],
  },
  {
    id: 59,
    name: "mi-4",
    multiple: [
      {
        inset: true,
        offsetX: 0,
        offsetY: "5px",
        blur: "20px",
        spread: 0,
        color: "160 167 186",
        opacity: 10,
      },
      {
        inset: true,
        offsetX: "-4px",
        offsetY: 0,
        blur: 0,
        spread: 0,
        color: "160 167 186",
        opacity: 40,
      },
    ],
  },
  // Large inner side
  {
    id: 60,
    name: "li-1",
    multiple: [
      {
        inset: true,
        offsetX: 0,
        offsetY: "5px",
        blur: "20px",
        spread: 0,
        color: "160 167 186",
        opacity: 10,
      },
      {
        inset: true,
        offsetX: 0,
        offsetY: "6px",
        blur: 0,
        spread: 0,
        color: "160 167 186",
        opacity: 40,
      },
    ],
  },
  {
    id: 61,
    name: "li-2",
    multiple: [
      {
        inset: true,
        offsetX: 0,
        offsetY: "5px",
        blur: "20px",
        spread: 0,
        color: "160 167 186",
        opacity: 10,
      },
      {
        inset: true,
        offsetX: 0,
        offsetY: "-6px",
        blur: 0,
        spread: 0,
        color: "160 167 186",
        opacity: 40,
      },
    ],
  },
  {
    id: 62,
    name: "li-3",
    multiple: [
      {
        inset: true,
        offsetX: 0,
        offsetY: "5px",
        blur: "20px",
        spread: 0,
        color: "160 167 186",
        opacity: 10,
      },
      {
        inset: true,
        offsetX: "6px",
        offsetY: 0,
        blur: 0,
        spread: 0,
        color: "160 167 186",
        opacity: 40,
      },
    ],
  },
  {
    id: 63,
    name: "li-4",
    multiple: [
      {
        inset: true,
        offsetX: 0,
        offsetY: "5px",
        blur: "20px",
        spread: 0,
        color: "160 167 186",
        opacity: 10,
      },
      {
        inset: true,
        offsetX: "-6px",
        offsetY: 0,
        blur: 0,
        spread: 0,
        color: "160 167 186",
        opacity: 40,
      },
    ],
  },
  // To up
  {
    id: 64,
    name: "t-1",
    inset: false,
    offsetX: 0,
    offsetY: "-16px",
    blur: "4px",
    spread: "-16px",
    color: "150 150 150",
    opacity: 20,
  },
  {
    id: 65,
    name: "t-2",
    inset: false,
    offsetX: 0,
    offsetY: "-16px",
    blur: "8px",
    spread: "-16px",
    color: "150 150 150",
    opacity: 40,
  },
  {
    id: 66,
    name: "t-3",
    inset: false,
    offsetX: 0,
    offsetY: "-16px",
    blur: "12px",
    spread: "-16px",
    color: "150 150 150",
    opacity: 20,
  },
  {
    id: 67,
    name: "t-4",
    inset: false,
    offsetX: 0,
    offsetY: "-16px",
    blur: "16px",
    spread: "-10px",
    color: "150 150 150",
    opacity: 20,
  },
  {
    id: 68,
    name: "t-5",
    inset: false,
    offsetX: 0,
    offsetY: "-16px",
    blur: "10px",
    spread: "-8px",
    color: "150 150 150",
    opacity: 30,
  },
  {
    id: 69,
    name: "t-6",
    inset: false,
    offsetX: 0,
    offsetY: "-16px",
    blur: "16px",
    spread: "-6px",
    color: "150 150 150",
    opacity: 40,
  },
  // To down
  {
    id: 70,
    name: "b-1",
    inset: false,
    offsetX: 0,
    offsetY: "16px",
    blur: "4px",
    spread: "-16px",
    color: "150 150 150",
    opacity: 20,
  },
  {
    id: 71,
    name: "b-2",
    inset: false,
    offsetX: 0,
    offsetY: "16px",
    blur: "8px",
    spread: "-16px",
    color: "150 150 150",
    opacity: 40,
  },
  {
    id: 72,
    name: "b-3",
    inset: false,
    offsetX: 0,
    offsetY: "-16px",
    blur: "12px",
    spread: "-16px",
    color: "150 150 150",
    opacity: 20,
  },
  {
    id: 73,
    name: "b-4",
    inset: false,
    offsetX: 0,
    offsetY: "16px",
    blur: "16px",
    spread: "-10px",
    color: "150 150 150",
    opacity: 20,
  },
  {
    id: 74,
    name: "b-5",
    inset: false,
    offsetX: 0,
    offsetY: "16px",
    blur: "10px",
    spread: "-8px",
    color: "150 150 150",
    opacity: 30,
  },
  {
    id: 75,
    name: "b-6",
    inset: false,
    offsetX: 0,
    offsetY: "16px",
    blur: "16px",
    spread: "-6px",
    color: "150 150 150",
    opacity: 40,
  },
  // To right
  {
    id: 76,
    name: "r-1",
    inset: false,
    offsetX: "12px",
    offsetY: 0,
    blur: "4px",
    spread: "-12px",
    color: "150 150 150",
    opacity: 20,
  },
  {
    id: 77,
    name: "r-2",
    inset: false,
    offsetX: "12px",
    offsetY: 0,
    blur: "8px",
    spread: "-12px",
    color: "150 150 150",
    opacity: 30,
  },
  {
    id: 78,
    name: "r-3",
    inset: false,
    offsetX: "16px",
    offsetY: 0,
    blur: "12px",
    spread: "-16px",
    color: "150 150 150",
    opacity: 30,
  },
  {
    id: 79,
    name: "r-4",
    inset: false,
    offsetX: "16px",
    offsetY: 0,
    blur: "16px",
    spread: "-10px",
    color: "150 150 150",
    opacity: 30,
  },
  {
    id: 80,
    name: "r-5",
    inset: false,
    offsetX: "16px",
    offsetY: 0,
    blur: "10px",
    spread: "-8px",
    color: "150 150 150",
    opacity: 40,
  },
  {
    id: 81,
    name: "r-6",
    inset: false,
    offsetX: "16px",
    offsetY: 0,
    blur: "16px",
    spread: "-6px",
    color: "150 150 150",
    opacity: 50,
  },
  // To left
  {
    id: 82,
    name: "l-1",
    inset: false,
    offsetX: "-12px",
    offsetY: 0,
    blur: "4px",
    spread: "-12px",
    color: "150 150 150",
    opacity: 20,
  },
  {
    id: 83,
    name: "l-2",
    inset: false,
    offsetX: "-12px",
    offsetY: 0,
    blur: "8px",
    spread: "-12px",
    color: "150 150 150",
    opacity: 30,
  },
  {
    id: 84,
    name: "l-3",
    inset: false,
    offsetX: "-16px",
    offsetY: 0,
    blur: "12px",
    spread: "-16px",
    color: "150 150 150",
    opacity: 30,
  },
  {
    id: 85,
    name: "l-4",
    inset: false,
    offsetX: "-16px",
    offsetY: 0,
    blur: "16px",
    spread: "-10px",
    color: "150 150 150",
    opacity: 30,
  },
  {
    id: 86,
    name: "l-5",
    inset: false,
    offsetX: "-16px",
    offsetY: 0,
    blur: "10px",
    spread: "-8px",
    color: "150 150 150",
    opacity: 40,
  },
  {
    id: 87,
    name: "l-6",
    inset: false,
    offsetX: "-16px",
    offsetY: 0,
    blur: "16px",
    spread: "-6px",
    color: "150 150 150",
    opacity: 50,
  },
  // Angle: top left
  {
    id: 88,
    name: "tl-1",
    inset: false,
    offsetX: "-1px",
    offsetY: "-1px",
    blur: 0,
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 89,
    name: "tl-2",
    inset: false,
    offsetX: "-2px",
    offsetY: "-2px",
    blur: "4px",
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 90,
    name: "tl-3",
    inset: false,
    offsetX: "-4px",
    offsetY: "-4px",
    blur: "4px",
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 91,
    name: "tl-4",
    inset: false,
    offsetX: "-4px",
    offsetY: "-4px",
    blur: 0,
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 92,
    name: "tl-5",
    inset: false,
    offsetX: "-6px",
    offsetY: "-6px",
    blur: 0,
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 93,
    name: "tl-6",
    inset: false,
    offsetX: "-8px",
    offsetY: "-8px",
    blur: "4px",
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  // Angle top right
  {
    id: 94,
    name: "tr-1",
    inset: false,
    offsetX: "1px",
    offsetY: "-1px",
    blur: 0,
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 95,
    name: "tr-2",
    inset: false,
    offsetX: "2px",
    offsetY: "-2px",
    blur: "4px",
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 96,
    name: "tr-3",
    inset: false,
    offsetX: "4px",
    offsetY: "-4px",
    blur: "4px",
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 97,
    name: "tr-4",
    inset: false,
    offsetX: "4px",
    offsetY: "-4px",
    blur: 0,
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 98,
    name: "tr-5",
    inset: false,
    offsetX: "6px",
    offsetY: "-6px",
    blur: 0,
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 99,
    name: "tr-6",
    inset: false,
    offsetX: "8px",
    offsetY: "-8px",
    blur: "4px",
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  // Angle: bottom right
  {
    id: 100,
    name: "br-1",
    inset: false,
    offsetX: "1px",
    offsetY: "1px",
    blur: 0,
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 101,
    name: "br-2",
    inset: false,
    offsetX: "2px",
    offsetY: "2px",
    blur: "4px",
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 102,
    name: "br-3",
    inset: false,
    offsetX: "4px",
    offsetY: "4px",
    blur: "4px",
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 103,
    name: "br-4",
    inset: false,
    offsetX: "4px",
    offsetY: "4px",
    blur: 0,
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 104,
    name: "br-5",
    inset: false,
    offsetX: "6px",
    offsetY: "6px",
    blur: 0,
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 105,
    name: "br-6",
    inset: false,
    offsetX: "8px",
    offsetY: "8px",
    blur: "4px",
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  // Angle: bottom left
  {
    id: 106,
    name: "bl-1",
    inset: false,
    offsetX: "-1px",
    offsetY: "1px",
    blur: 0,
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 107,
    name: "bl-2",
    inset: false,
    offsetX: "-2px",
    offsetY: "2px",
    blur: "4px",
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 108,
    name: "bl-3",
    inset: false,
    offsetX: "-4px",
    offsetY: "4px",
    blur: "4px",
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 109,
    name: "bl-4",
    inset: false,
    offsetX: "-4px",
    offsetY: "4px",
    blur: 0,
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 110,
    name: "bl-5",
    inset: false,
    offsetX: "-6px",
    offsetY: "6px",
    blur: 0,
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  {
    id: 111,
    name: "bl-6",
    inset: false,
    offsetX: "-8px",
    offsetY: "8px",
    blur: "4px",
    spread: 0,
    color: "150 150 150",
    opacity: 10,
  },
  // Patterns
  {
    id: 112,
    name: "p-1",
    multiple: [
      {
        inset: false,
        offsetX: "-6px",
        offsetY: "6px",
        blur: 0,
        spread: 0,
        color: "160 167 186",
        opacity: 20,
      },
      {
        inset: false,
        offsetX: "-12px",
        offsetY: "12px",
        blur: 0,
        spread: 0,
        color: "160 167 186",
        opacity: 20,
      },
      {
        inset: false,
        offsetX: "-18px",
        offsetY: "18px",
        blur: 0,
        spread: 0,
        color: "160 167 186",
        opacity: 20,
      },
    ],
  },
  {
    id: 113,
    name: "p-2",
    multiple: [
      {
        inset: false,
        offsetX: "6px",
        offsetY: "6px",
        blur: 0,
        spread: 0,
        color: "160 167 186",
        opacity: 20,
      },
      {
        inset: false,
        offsetX: "12px",
        offsetY: "12px",
        blur: 0,
        spread: 0,
        color: "160 167 186",
        opacity: 20,
      },
      {
        inset: false,
        offsetX: "18px",
        offsetY: "18px",
        blur: 0,
        spread: 0,
        color: "160 167 186",
        opacity: 20,
      },
    ],
  },
  {
    id: 114,
    name: "p-2",
    multiple: [
      {
        inset: true,
        offsetX: 0,
        offsetY: 0,
        blur: 0,
        spread: "6px",
        color: "160 167 186",
        opacity: 24,
      },
      {
        inset: true,
        offsetX: 0,
        offsetY: 0,
        blur: 0,
        spread: "12px",
        color: "160 167 186",
        opacity: 18,
      },
      {
        inset: true,
        offsetX: 0,
        offsetY: 0,
        blur: 0,
        spread: "18px",
        color: "160 167 186",
        opacity: 12,
      },
      {
        inset: true,
        offsetX: 0,
        offsetY: 0,
        blur: 0,
        spread: "24px",
        color: "160 167 186",
        opacity: 6,
      },
    ],
  },
  {
    id: 115,
    name: "p-2",
    multiple: [
      {
        inset: false,
        offsetX: 0,
        offsetY: 0,
        blur: 0,
        spread: "6px",
        color: "160 167 186",
        opacity: 24,
      },
      {
        inset: false,
        offsetX: 0,
        offsetY: 0,
        blur: 0,
        spread: "12px",
        color: "160 167 186",
        opacity: 18,
      },
      {
        inset: false,
        offsetX: 0,
        offsetY: 0,
        blur: 0,
        spread: "18px",
        color: "160 167 186",
        opacity: 12,
      },
      {
        inset: false,
        offsetX: 0,
        offsetY: 0,
        blur: 0,
        spread: "24px",
        color: "160 167 186",
        opacity: 6,
      },
    ],
  },
  // {
  //   id: 11,
  //   name: "",
  //   inset: false,
  //   offsetX: "px",
  //   offsetY: "px",
  //   blur: "px",
  //   spread: 0,
  //   color: "150 150 150",
  //   opacity: 10,
  // },
];