Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                 <div id="app">
        <info-box></info-box>
        <css-text :show='showCSS' :css='style'></css-text>

        <transition name="hide-background" @after-enter='completed'>
            <div id='background-display' v-if="showInfo == false"
                 :class='{"show-css": (showCSS == true)}'>

                <div class='show-gradient'
                     @wheel='toggleControls("wheel", $event)'
                     @click='toggleControls("click", $event)' :style='style'>
                </div>

                <div id='presets-fullview-container'
                     :class='{show: showPresets}'>
                    <div class='presets-wrapper'>
                        <div v-for='(preset, index) in presets'
                             :style="preset.style"
                             @click='applyGradient(index)'>
                        </div>
                    </div>
                </div>


                <div id='controls-container' :class='{show: showControls}'>
                    <div class='controls-wrapper'>
                        <color-slider :colors='getColors'
                                      @add='addColorStop($event)'>
                        </color-slider>

                        <div class='gradients-stack'>
                            <h3>Stack</h3>
                            <div class='gradients-stack-container'>
                                <div v-for='(gradient, index) in gradients'
                                     :class='{highlight: (currentGradient == index), noneed: (gradients.length == 1)}'>
                                    <div class='gradient-box-container'>
                                        <div class='gradient-box'
                                             @click='setGradient(index)'
                                             :style='showGradient(index)'>
                                        </div>
                                    </div>
                                    <div class='delete'
                                         @click='deleteGradient(index)'>×</div>
                                    <div class='hide'
                                         :class='{hidden: (gradient.status == "hide"), tall: (gradients.length == 1)}'
                                         @click='toggleGradient(index)'></div>
                                </div>
                            </div>
                            <div class='add-gradient' @click='addGradient'>+
                            </div>
                        </div>
                        <options-container :options='getData'>
                        </options-container>
                        <div class='color-stops-container'>
                            <h3>Colors</h3>
                            <div class='color-picker'>
                                <chrome-picker :value="currentColor.value"
                                               @input="updatePicker">
                                </chrome-picker>
                            </div>
                        </div>
                        <div class='color-presets-container'>
                            <h3>Presets</h3>
                            <user-presets></user-presets>

                            <div class='other-presets'>
                                <div class='gradient-div'
                                     v-for='(presetObj, index) in presetsFilterd'
                                     :style="presetObj.preset.style"
                                     @click='applyGradient(presetObj.index)'>
                                </div>
                            </div>
                            <div class="more-presets"
                                 @click='showPresets = true'>More</div>

                        </div>
                        <div class='user-actions-container'>
                            <div class='show-css' @click='showCSS = true;'>Show
                                CSS</div>
                            <div class='info'
                                 @click='showInfo = true; showCSS = false;'>Info
                            </div>

                            <a target="_top" class="twitter"
                               href="https://twitter.com/intent/follow?screen_name=kalimahapps&tw_p=followbutton"><i
                                   class="fab fa-twitter"></i></a>

                            <div class='reset' @click='resetGradient'>RESET
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>

    <template id='user-presets'>
        <div class='user-generated' v-click-outside="deselectPreset">
            <div class='user-presets'>
                <span v-for='(preset, index) in userPresets'
                      :class='{selected: selectedPreset == index}'
                      @click='selectedPreset = index'
                      :style='preset.style'></span>
            </div>
            <div class='presets-actions' :class='enableClass'>
                <div class='apply-preset' @click='applyPreset' data-tooltip='Apply'><i class="far fa-check-circle"></i>
                </div>
                <div class='save-preset' @click='savePreset' data-tooltip='save'><i class="fas fa-save"></i></div>
            </div>
        </div>
    </template>

    <template id='options-container'>
        <div class='colors-options-container'>
            <h3>Options</h3>
            <div class='colors-options-top'>

                <toggle-control :options='options.type' :icons='typeIcons'>
                </toggle-control>

                <toggle-control :options='options.repeating'
                                :boolean-icon='repeatIcon' :type="'boolean'"
                                :tip="'Repeat'"></toggle-control>

                <toggle-control :options='options.shape'
                                v-if="(options.type.selected == 'radial')"
                                :icons="shapeIcons">
                </toggle-control>
            </div>
            <div class='colors-options-bottom'>
                <div class='linear-direction'
                     v-if="(options.type.selected == 'linear')">
                    <circular-control :direction='options.direction'>
                    </circular-control>
                </div>

                <div class='radial-size'
                     v-if="(options.type.selected == 'radial')">
                    <range :rangedata='options.size.ellipse.width'
                           v-if="(options.shape.selected == 'ellipse')"></range>
                    <range :rangedata='options.size.ellipse.height'
                           v-if="(options.shape.selected == 'ellipse')">
                    </range>
                    <range :rangedata='options.size.circle.length'
                           v-if="(options.shape.selected == 'circle')"></range>
                </div>
                <div class='radial-position'
                     v-if="(options.type.selected == 'radial')">
                    <range :rangedata='options.position.horizontal'></range>
                    <range :rangedata='options.position.vertical'></range>
                </div>
            </div>
        </div>
    </template>

    <template id='circular-control'>
        <div class='control circle' @wheel='handleCircleValue'>
            <div class='circle-range'>
                <div class='circle-range-knob' :style="getRotation"></div>
            </div>
            <span class='icon spread'></span>
            <span class='amount'>
                <span>
                    <input v-model='direction.amount' min="0" max="360" size="3"
                           @keydown.up="increaseValue"
                           @keydown.down="decreaseValue" @input="parseDigits" />
                </span>
                <span>deg</span>
            </span>
        </div>
    </template>

    <template id='range'>
        <div class='control range'>
            <span class='title'>{{rangedata.name}}</span>
            <span class='range'>
                <input type="range" :min="rangedata.min" :max="rangedata.max"
                       :step='rangedata.step' v-model='rangedata.amount'
                       @input="$emit('update')" />
            </span>
            <span class='amount'>{{rangedata.amount}}{{rangedata.unit}}</span>
        </div>
    </template>

    <template id='colors'>
        <div class='control color'>
            <span class='color-box'>
                <span :style='{"background-color": color.value }'></span>
            </span>
            <span class='color-stop'>
                <input v-model='color.stop'>
            </span>
            <span class='color-delete'
                  @click='length > 2 ? $emit("delete") : null'
                  :class='{disabled: length <= 2}'>×</span>
        </div>
    </template>

    <template id='toggle-control'>
        <div class='toggle control'>
            <div v-for='(selection, index) in options.selections'
                 @click='toggleSelection(index)'
                 v-if='options.selected == selection'
                 :class='{on: (selection == true), off: (selection == false)}'
                 :data-tip="(type == 'boolean') ? tip : selection">
                <span class='icon' v-if='showIcon == true'
                      :style="{'background-image': (type == 'boolean') ? 'url('+ booleanIcon +')' : 'url('+ icons[index] +')'}"></span>
                <span class='text' v-if='showText == true'></span>
            </div>
        </div>
    </template>

    <template id='css-text'>
        <div id='css-text-container' :class='{show: show == true}'>
            <div class='css-text'>{{css['background-image']}}</div>
        </div>
        </div>
    </template>

    <template id='color-slider'>
        <div class='colors-slider'>
            <div class='gradient-bar' :style='displayBarGradient'
                 @click='$emit("add", $event)'></div>
            <color-stop v-for='(color, index) in colors' :color='color'
                        :key='index' :index='index'></color-stop>
        </div>
    </template>


    <template id='color-stop'>
        <div class='color-stop' :style='{left: color.stop + "%" }'
             :class='{hide: (color.status == "out"), selected: (this.$root.currentColorIndex == index)}'>
            <span class='color-view' :style='opaqueColor'
                  @mousedown="dragStart(index)"></span>
            <span class='stop-input'>
                <input v-model='color.stop' size='3' min="0" max="100"
                       @keydown.up="increaseValue" @keydown.down="decreaseValue"
                       @keyup="parseDigits"
                       @focus='$root.currentColorIndex = index'>
            </span>

        </div>
    </template>

    <template id='info-box-template'>
        <transition name="show-info">
            <div id='info-box-wrapper' v-if='showInfo' @keydown.esc="hideInfo">
                <div class='info-box'>
                    <div class='close' @click="hideInfo">×</div>
                    <div class='logo'>
                        Kalimah Gradient Generator
                    </div>
                    <div class='about'>
                        <h1>About</h1>
                        <p>There are many gradient generators available
                            online but I tried to make this generator as
                            comprehensive and as easy to use as possible.
                        </p>
                        <p>You can customize all aspects of gradients including
                            stacking multiple gradients, creating
                            linear and radial gradients, applying repeat
                            gradients as well as many other features.</p>
                    </div>

                    <div class='howto'>
                        <h1>How to use:</h1>
                        <div class='howto-wrapper'>
                            <h2>Stack</h2>
                            <p>You can add a new gradient layer by clicking on
                                the add button below the gradient stack.
                                Each layer has a show/hide and delete buttons.
                            </p>
                            <p>Those buttons appears when you hover the layer or
                                select it. If there is only one layer
                                in the stack the buttons will not show.</p>
                            <h2>Color options</h2>
                            <p>In this section all main options can be
                                configured. Gradient type (linear, radial),
                                repeat, gradient shape (circle, ellipse) for
                                radial gradients and also height, width and
                                position of the gradient.</p>
                            <h2>Colors</h2>
                            <p>To change color of any of the stops select the
                                stop first then modify the color using
                                this section. You can either select a color from
                                the color box or insert the hex color
                                in the input provided.
                            </p>
                            <p>You can change the stop value by dragging the pin
                                on the gradient bar or set the value
                                directly by clicking on the value above the pin.
                            </p>
                            <h2>Presets</h2>
                            <p>There are two main usage for this section. Either
                                save (or apply) the presets that you
                                generated or select on the presets available.
                            </p>
                            <p>There are more 500 gradient preset that you can
                                view by clicking on "more presets" button
                                below the presets section.</p>
                            <p>Once displayed, to hide the presets section you
                                can either scroll down with the mouse
                                wheel or click anywhere on the gradient display.
                            </p>
                        </div>
                    </div>

                    <div class='resources'>
                        <h1>Made with</h1>
                        <li><a target="_blank"
                               href='https://vuejs.org/'>Vue.js</a></li>
                        <li><a target="_blank"
                               href='http://vue-color.surge.sh/'>Vue Color</a>
                        </li>

                        <hr />
                        <li><a target="_blank"
                               href='https://webgradients.com/'>WebGradients</a>
                        </li>
                        <li><a target="_blank"
                               href='https://uigradients.com/'>uiGradients</a>
                        </li>
                        <hr />
                        <li><a target="_blank"
                               href='https://thenounproject.com/indygo'>Repeat
                                icon</a></li>
                        <li><a target="_blank"
                               href='https://www.iconfinder.com/yanlu'>Hide
                                icon</a></li>
                        <li><a target="_blank"
                               href='https://ionicons.com/'>Ionicons</a></li>
                        <li><a target="_blank"
                               href='https://fontawesome.com/'>FontAwesome</a>
                        </li>

                        <hr />

                        <li><a target="_blank"
                               href='https://fonts.google.com'>Google Fonts</a>
                        </li>


                    </div>
                </div>

            </div>
        </transition>
    </template>

              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Roboto:400,900');
@import url('https://fonts.googleapis.com/css?family=Baloo:400,900');
@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css');

body {
  background-color: gray;
  font-size: 16px;
  margin: 0;

  * {
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    user-select: none;
  }
}

$color: #3498db;

@mixin checkered-background($bg-size) {
  background: linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.0980392) 25%,
      rgba(0, 0, 0, 0) 25%,
      rgba(0, 0, 0, 0) 75%,
      rgba(0, 0, 0, 0.0980392) 75%,
      rgba(0, 0, 0, 0.0980392) 0
    ),
    linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.0980392) 25%,
      rgba(0, 0, 0, 0) 25%,
      rgba(0, 0, 0, 0) 75%,
      rgba(0, 0, 0, 0.0980392) 75%,
      rgba(0, 0, 0, 0.0980392) 0
    ),
    rgb(255, 255, 255);
  background-position: 0 0, $bg-size / 2 $bg-size / 2;
  background-size: $bg-size $bg-size;
}

#background-display {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  transition: transform 0.3s linear;

  @include checkered-background(2em);

  .show-gradient {
    width: 100%;
    height: 100%;
  }

  &.show-css {
    transform: translatey(-10vh);
  }
}

#presets-fullview-container {
  position: fixed;
  bottom: 0;
  width: 90vw;
  left: 5vw;
  height: 60vh;
  background-color: white;
  padding: 40px 20px;
  z-index: 5;

  transition: all 0.4s ease-in-out;
  transform: translateY(110%);

  &.show {
    transform: translateY(0);
  }

  .presets-wrapper {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, 5em);
    grid-gap: 1em;
    overflow: auto;
    padding: 1em;
    > div {
      height: 5em;
      border: 2px solid white;
      box-shadow: 0 0 1px 2px rgba(180, 180, 180, 0.8);
      border-radius: 3px;
      overflow: hidden;
      cursor: pointer;
    }
  }
}

#share-container {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 10vh;
  width: 100vw;
  background-color: #bdc3c7;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  transition: transform 0.3s linear;
  transform: translateY(100%);

  &.show {
    transform: translateY(0%);
  }

  > div {
    cursor: pointer;
    width: 1em;
    height: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 15px;
    opacity: 0.8;
    border-radius: 2px;

    transition: all 0.2s;

    color: white;

    i {
      font-size: 0.5em;
    }

    &:hover {
      opacity: 1;
    }
  }
}

#css-text-container {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 10vh;
  width: 100vw;
  background-color: #bdc3c7;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  transition: transform 0.3s linear;
  transform: translateY(100%);

  &.show {
    transform: translateY(0%);
  }

  .css-text {
    min-width: 20%;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 0.15em;
    padding: 0.4em 1.5em;
    margin-right: 1em;
    user-select: all;
  }
}

#info-box-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  transition: all 0.3s ease-in-out;
  z-index: 5;
  background: #c1b6a4;
  $color: #48443a;

  //transform: translatey(100%);
  .info-box {
    padding: 3em 0;
    position: relative;
    display: grid;
    grid-template-columns: 20% 55% 15%;
    grid-template-rows: 15% 85%;
    grid-gap: 5em;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;

    .logo {
      grid-column: 1 / 4;
      grid-row: 1;
      font-size: 3.5em;
      background: purple;
      background-color: #dcd9d4;
      background-image: linear-gradient(90deg, #9795f0, #fbc8d4, #13547a, #80d0c7, #88d3ce, #6e45e2);
      background-size: 600% 600%;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-family: 'Fredoka One';
      animation: move-gradient 30s ease infinite reverse;
    }

    h1 {
      font-size: 1.5em;
      margin: 15px 0;
      font-family: Baloo;
      color: $color;
    }

    h2 {
      font-size: 1.2em;
      margin: 5px 0;
      font-family: Baloo;
      color: $color;
      font-weight: normal;
    }

    p {
      margin: 20px 0;
      font-size: 0.8em;
      line-height: 1.5em;
      text-align: justify;
      color: $color;

      &:first-child {
        margin-top: 0;
      }
    }

    .close {
      position: absolute;
      top: 3%;
      right: 2%;
      width: 1em;
      height: 1em;
      font-size: 2em;
      font-weight: bold;
      transition: all 0.2s;
      opacity: 0.8;
      color: darken($color, 20%);
      cursor: pointer;
      justify-content: center;
      align-items: center;
      display: flex;

      &:hover {
        opacity: 1;
      }
    }

    .about {
      p {
        line-height: 2.3em;
      }
    }

    .howto {
      position: relative;

      .howto-wrapper {
        column-count: 2;
        column-gap: 3em;

        p {
          line-height: 2em;
        }

        &::after,
        &::before {
          content: '';
          height: 80%;
          width: 1px;
          background-color: fade_out($color, 0.9);
          position: absolute;
          left: calc(100% + 2.5em);
          top: 10%;
        }

        &::after {
          left: -2.5em;
        }
      }
    }

    .resources {
      li {
        list-style-type: none;
        font-size: 0.9em;
        line-height: 2em;

        a {
          transition: all 0.2s;
          opacity: 0.7;
          color: $color;
          text-decoration: none;

          &:hover {
            opacity: 1;
          }

          &:active,
          &:visited {
            color: $color;
          }
        }
      }

      hr {
        border: 0.5px solid;
        width: 50%;
        position: relative;
        color: fade_out($color, 0.9);
      }
    }
  }
}

#controls-container {
  position: fixed;
  bottom: 0;
  left: 0;
  min-height: 35vh;
  width: 100vw;
  transition: transform 0.4s ease-in-out;
  transform: translateY(80%);
  pointer-events: none;

  &.show {
    transform: translateY(0);
  }

  .controls-wrapper {
    padding: 0 20px;
    box-shadow: 2px 0 2px 0 rgba(0, 0, 0, 0.15);
    background-color: white;
    display: grid;
    grid-template-columns: 100px minmax(150px, 170px) minmax(200px, 250px) 240px minmax(50px, 100px);
    grid-gap: 35px;
    max-width: 1040px;
    left: 50%;
    position: relative;
    height: 100%;
    transform: translateX(-50%);
    border-radius: 0.3em 0.3em 0 0;
    pointer-events: initial;
    opacity: 0.1;
    transition: all 0.3s ease-in-out 0.3s;

    &:hover {
      opacity: 1;
      transition: all 0.3s;
    }
    .colors-slider {
      width: 100%;
      height: 40px;
      margin-top: 10px;
      position: relative;
      grid-column: 1 / 6;
      grid-row: 1;

      &::after {
        position: absolute;
        bottom: -20px;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: transparentize(gray, 0.7);
        content: '';
      }

      .gradient-bar {
        width: 100%;
        border-radius: 5px;
        height: 100%;
        box-shadow: 0 0 0 2px #2b2b2b;
        border: 2px solid white;
        cursor: copy;
        z-index: 2;

        &::before {
          @include checkered-background(1em);
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: inherit;
          z-index: -1;
        }
      }

      .color-stop {
        position: absolute;
        top: 0;
        height: 100%;
        width: 10px;
        z-index: 1;
        transform: translateX(-25%);
        transition: box-shadow 0.2s;

        &.stackTop {
          z-index: 2;
        }

        &.hide {
          display: none;
        }

        &.selected {
          z-index: 2;

          .color-view {
            box-shadow: 0 0 0 2px #2b2b2b, 0 0 0px 5px rgba(189, 195, 199, 0.71);
          }

          .stop-input input {
            box-shadow: inset 0 0 0 2px #bdc3c7;
            opacity: 1;
            font-size: 1em;
            transform: translate(0, 15%);
          }
        }

        .color-view {
          width: 20px;
          height: 20px;
          position: absolute;
          bottom: 100%;
          left: 0;
          display: flex;
          justify-content: center;
          align-content: center;
          border-radius: 5px;
          cursor: move;
          border: 2px solid white;
          box-shadow: 0 0 0 2px #2b2b2b;
          transition: box-shadow 0.2s;
          border-radius: 40% 60% 100% 0% / 100% 60% 40% 0%;
          transform: rotate(-45deg) translateX(-50%);
          z-index: 1;

          &:hover {
            box-shadow: 0 0 0 2px #2b2b2b, 0 0 0px 5px rgba(180, 180, 180, 0.6);
          }
        }

        .stop-input {
          position: absolute;
          bottom: 100%;
          left: 0%;
          transform: translate(-50%, -80%);

          input {
            border: 0px solid gray;
            text-align: center;
            outline: none;
            font-size: 0.8em;
            box-shadow: 0 0 0 0px gray;
            transition: all 0.2s;
            max-width: 100%;
            border-radius: 5px;
            padding: 0.4em 0.4em;
            opacity: 0.5;

            &:focus {
            }
          }
        }
      }
    }

    .title {
      width: 20%;

      h1 {
        position: relative;
        margin: 40px 0 60px 0;
        color: darken($color, 25%);
        font-size: 2.5em;
        font-weight: bold;
        line-height: 1.2em;

        &::after {
          content: attr(data-title);
          position: absolute;
          top: 50%;
          left: 50%;
          font-size: 1.7em;
          line-height: 1em;
          transform: translate(-50%, -50%);
          opacity: 0.1;
          font-weight: bold;
          color: transparentize($color, 0.1);
        }
      }
    }

    > div:hover h3 {
      color: rgba(180, 180, 180, 1);
    }
    h3 {
      width: 100%;
      text-align: left;
      text-transform: capitalize;
      font-size: 1em;
      color: rgba(180, 180, 180, 0.5);
      text-indent: 5%;
      margin-top: 15px;
      margin-bottom: 10px;
      transition: color 0.3s;
    }

    .gradients-stack {
      .gradients-stack-container {
        max-height: 200px;
        overflow: auto;
        margin-bottom: 10px;

        > div {
          width: 100%;
          display: grid;
          grid-template-columns: 2fr 1fr;
          grid-template-rows: 1fr 1fr;
          margin: 3px 0;
          height: 50px;
          cursor: pointer;
          transition: all 0.3s;
          opacity: 0.5;
          grid-column-gap: 2px;

          &.noneed {
            .delete,
            .hide {
              display: none;
            }
          }

          &.highlight,
          &:hover {
            opacity: 1;

            .hide,
            .delete {
              transform: translateX(0%);

              &:hover {
                opacity: 1;
              }
            }
          }

          .gradient-box-container {
            grid-column: 1;
            grid-row: 1 / span 2;
            border-radius: 0px;
            z-index: 3;
            position: relative;
            display: block;

            @include checkered-background(0.5em);

            .gradient-box {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
            }
          }

          .hide {
            transform: translateX(-110%);
            transition: all 0.2s;
            grid-column: 2;
            grid-row: 2;
            opacity: 0.8;
            cursor: pointer;
            text-align: center;
            background-color: #1abc9c;
            background-position: 50% 50%;
            background-size: 90% 90%;
            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgPjx0aXRsZS8+PGRlc2MvPjxkZWZzLz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj48ZyBmaWxsPSIjZmZmZmZmIj48cGF0aCBkPSJNMTcsOSBDOCw5IDQsMTYgNCwxNiBDNCwxNiA4LDIzLjAwMDAwMSAxNywyMyBDMjYsMjIuOTk5OTk5IDMwLDE2IDMwLDE2IEMzMCwxNiAyNiw5IDE3LDkgTDE3LDkgWiBNMTcsMjAgQzE5LjIwOTEzOTEsMjAgMjEsMTguMjA5MTM5MSAyMSwxNiBDMjEsMTMuNzkwODYwOSAxOS4yMDkxMzkxLDEyIDE3LDEyIEMxNC43OTA4NjA5LDEyIDEzLDEzLjc5MDg2MDkgMTMsMTYgQzEzLDE4LjIwOTEzOTEgMTQuNzkwODYwOSwyMCAxNywyMCBMMTcsMjAgWiBNMTcsMTkgQzE4LjY1Njg1NDMsMTkgMjAsMTcuNjU2ODU0MyAyMCwxNiBDMjAsMTQuMzQzMTQ1NyAxOC42NTY4NTQzLDEzIDE3LDEzIEMxNS4zNDMxNDU3LDEzIDE0LDE0LjM0MzE0NTcgMTQsMTYgQzE0LDE3LjY1Njg1NDMgMTUuMzQzMTQ1NywxOSAxNywxOSBMMTcsMTkgWiBNMTcsMTcgQzE3LjU1MjI4NDgsMTcgMTgsMTYuNTUyMjg0OCAxOCwxNiBDMTgsMTUuNDQ3NzE1MiAxNy41NTIyODQ4LDE1IDE3LDE1IEMxNi40NDc3MTUyLDE1IDE2LDE1LjQ0NzcxNTIgMTYsMTYgQzE2LDE2LjU1MjI4NDggMTYuNDQ3NzE1MiwxNyAxNywxNyBMMTcsMTcgWiIvPjwvZz48L2c+PC9zdmc+');

            &.hidden {
              background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyIDMyIiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTguMTA4Njk4OTEsMjAuODkxMzAxMSBDNC42MTcyMDgxNiwxOC44MzAxMTQ3IDMsMTYgMywxNiBDMywxNiA3LDkgMTYsOSBDMTcuMzA0NTEwNyw5IDE4LjUwMzk3NTIsOS4xNDcwNjQ2NiAxOS42MDE0Mzg4LDkuMzk4NTYxMjIgTDE2Ljg5ODY1MzEsMTIuMTAxMzQ2OSBDMTYuNjA5Nzg4NSwxMi4wMzUwMzQyIDE2LjMwODk4NTYsMTIgMTYsMTIgQzEzLjc5MDg2MDksMTIgMTIsMTMuNzkwODYwOSAxMiwxNiBDMTIsMTYuMzA4OTg1NiAxMi4wMzUwMzQyLDE2LjYwOTc4ODUgMTIuMTAxMzQ2OSwxNi44OTg2NTMxIEw4LjEwODY5ODkxLDIwLjg5MTMwMTEgTDguMTA4Njk4OTEsMjAuODkxMzAxMSBMOC4xMDg2OTg5MSwyMC44OTEzMDExIFogTTEyLjM5ODU2MSwyMi42MDE0MzkgQzEzLjQ5NjAyNDYsMjIuODUyOTM1NiAxNC42OTU0ODkyLDIzLjAwMDAwMDEgMTYsMjMgQzI1LDIyLjk5OTk5OSAyOSwxNiAyOSwxNiBDMjksMTYgMjcuMzgyNzkxOCwxMy4xNjk4ODU2IDIzLjg5MTMwMDgsMTEuMTA4Njk5MiBMMTkuODk4NjUzMSwxNS4xMDEzNDY5IEMxOS45NjQ5NjU4LDE1LjM5MDIxMTUgMjAsMTUuNjkxMDE0NCAyMCwxNiBDMjAsMTguMjA5MTM5MSAxOC4yMDkxMzkxLDIwIDE2LDIwIEMxNS42OTEwMTQ0LDIwIDE1LjM5MDIxMTUsMTkuOTY0OTY1OCAxNS4xMDEzNDY5LDE5Ljg5ODY1MzEgTDEyLjM5ODU2MSwyMi42MDE0MzkgTDEyLjM5ODU2MSwyMi42MDE0MzkgTDEyLjM5ODU2MSwyMi42MDE0MzkgWiBNMTksMTYgQzE5LjAwMDAwMDEsMTYuNzY3NzY2OSAxOC43MDcxMDY4LDE3LjUzNTUzMzkgMTguMTIxMzIwMywxOC4xMjEzMjAzIEMxNy41MzU1MzM5LDE4LjcwNzEwNjggMTYuNzY3NzY2OSwxOS4wMDAwMDAxIDE2LDE5IEwxOSwxNiBMMTksMTYgTDE5LDE2IFogTTE2LDEzIEMxNS4yMzIyMzMxLDEyLjk5OTk5OTkgMTQuNDY0NDY2MSwxMy4yOTI4OTMyIDEzLjg3ODY3OTcsMTMuODc4Njc5NyBDMTMuMjkyODkzMiwxNC40NjQ0NjYxIDEyLjk5OTk5OTksMTUuMjMyMjMzMSAxMywxNiBMMTYsMTMgTDE2LDEzIEwxNiwxMyBaIE0yNCw3IEw3LDI0IEw4LDI1IEwyNSw4IEwyNCw3IEwyNCw3IFoiLz48L2c+PC9nPjwvc3ZnPg==');
            }
          }

          .delete {
            transform: translateX(-110%);
            transition: all 0.2s;
            cursor: pointer;
            text-align: center;
            font-size: 1.2em;
            color: red;
            font-weight: bold;
            background-color: #e74c3c;
            color: white;
            grid-column: 2;
            grid-row: 1;
            opacity: 0.8;
          }
        }
      }

      .add-gradient {
        opacity: 1;
        color: darken($color, 20%);
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid $color;
        border-radius: 2px;
        cursor: pointer;

        &:hover {
          background-color: lighten($color, 10%);
        }
      }
    }

    .colors-options-container {
      display: flex;
      flex-wrap: wrap;
      position: relative;
      align-content: flex-start;

      &::after,
      &::before {
        position: absolute;
        top: 10%;
        right: -12.5px;
        height: 80%;
        width: 1px;
        background-color: transparentize(gray, 0.9);
        content: '';
      }

      &::before {
        left: -12.5px;
      }

      .colors-options-top {
        width: 100%;
        width: 100%;
        display: grid;
        justify-items: center;
        grid-template-columns: 1fr 1fr 1fr;
      }

      .colors-options-bottom {
        justify-content: center;
        display: flex;
        width: 100%;
        padding: 1em 0;
        flex-direction: column;
        min-height: 150px;
      }
    }

    .color-stops-container {
      .vc-chrome {
        width: 100%;
        box-shadow: 0 0 1px 0 gray;

        .vc-chrome-saturation-wrap .vc-saturation-circle {
          transform: translate(-50%, -50%);
          box-shadow: 0 0 0 2px #fff, inset 0 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 1px 1px rgba(0, 0, 0, 1);
        }
      }
    }

    .color-presets-container {
      display: flex;
      flex-direction: column;

      .user-generated {
        border-bottom: 1px solid rgba(180, 180, 180, 0.4);
        display: grid;
        width: 100%;
        grid-template-columns: 70% 30%;
        padding: 10px;

        .user-presets {
          display: grid;
          grid-template-columns: repeat(auto-fill, 35px);
          grid-gap: 10px;
          padding: 5px 0px;

          &::after {
            content: '';
            background-color: rgba(180, 180, 180, 0.4);
            position: absolute;
            right: 0;
            top: 20%;
            height: 80%;
            width: 1px;
          }

          > span {
            height: 35px;
            cursor: pointer;
            border-radius: 3px;
            border: 2px solid white;
            box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.3);
            position: relative;
            z-index: 1;
            transition: all 0.2s;

            &.selected {
              box-shadow: 0 0 4px 3px rgba(0, 0, 0, 0.7);
            }
          }
        }

        .presets-actions {
          display: flex;
          justify-content: space-around;
          padding: 5px 0px;

          > div {
            filter: grayscale(1);
            opacity: 0.2;
            cursor: default;
            transition: all 0.2s;
            width: 45%;

            $color: #39d5ff;
            color: darken($color, 20%);
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid;
            border-radius: 2px;
            font-size: 0.9em;
            padding: 5px;
            background-color: lighten($color, 10%);

            &::before {
              content: attr(data-tooltip);
              position: absolute;
              white-space: nowrap;
              padding: 0.4em 0.9em;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%) scale(0);
              font-size: 0.9em;
              border-radius: 2px;
              background-color: lighten($color, 10%);
              pointer-events: none;
              opacity: 0;
              transition: all 0.2s ease-in-out;
            }

            &.save-preset {
              $color: #2ecc71;
              color: darken($color, 20%);
              background-color: lighten($color, 10%);
              &::before {
                background-color: lighten($color, 10%);
              }
            }
          }

          &.enable-save .save-preset,
          &.enable-apply .apply-preset {
            opacity: 1;
            cursor: pointer;
            filter: grayscale(0);

            &:hover {
              opacity: 0.7;

              &::before {
                bottom: 100%;
                transform: translate(-50%, -40%) scale(1);
                opacity: 1;
              }
            }
          }
        }
      }

      .other-presets {
        display: grid;
        grid-template-columns: repeat(auto-fill, 35px);
        grid-gap: 10px;
        padding: 10px;
        max-height: 220px;
        overflow: auto;
        width: 100%;

        > .gradient-div {
          height: 35px;
          cursor: pointer;
          border-radius: 3px;
          border: 2px solid white;
          box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.3);
          position: relative;
          z-index: 1;

          &:hover {
          }
        }
      }

      .more-presets {
        $color: #d35400;
        opacity: 1;
        color: darken($color, 20%);
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid $color;
        border-radius: 2px;
        transition: all 0.2s;
        font-size: 0.7em;
        padding: 5px;
        margin: 10px;
        cursor: pointer;

        &:hover {
          background-color: lighten($color, 10%);
        }
      }
    }

    .user-actions-container {
      display: flex;
      flex-direction: column;

      > div {
        $color: #9b59b6;
        opacity: 1;
        color: darken($color, 20%);
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid $color;
        border-radius: 2px;
        transition: all 0.2s;
        font-size: 0.7em;
        padding: 5px;
        margin: 10px 0;
        cursor: pointer;

        &.reset {
          color: darken(#e74c3c, 20%);
          border: 1px solid #e74c3c;
          margin-top: auto;

          &:hover {
            background-color: lighten(#e74c3c, 10%);
          }
        }

        &:hover {
          background-color: lighten($color, 10%);
          color: white;
        }
      }
      .twitter {
        animation: share-btn 15s forwards infinite;
        color: white;
        opacity: 0.8;
        background-color: #1c9cea;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        border-radius: 2px;
        transition: all 0.2s;
        font-size: 0.9em;
        padding: 7px;
        margin: 10px 0;
        &:hover {
          opacity: 1;
        }
      }
    }

    .control {
      display: flex;
      font-size: 0.7em;

      &.toggle {
        color: white;
        cursor: pointer;
        text-align: center;
        text-transform: uppercase;
        height: 3em;
        width: 3em;

        > div {
          display: flex;
          width: 100%;
          padding: 0.3em;
          background-color: #3498db;
          border-radius: 5px;
          transition: all 0.3s;
          opacity: 1;
          position: relative;

          &:after {
            content: attr(data-tip);
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, 0%) scale(0);
            background-color: inherit;
            border-radius: 3px;
            padding: 0.3em 0.5em;
            opacity: 0;
            transition: all 0.3s;
            pointer-events: none;
          }

          &:hover {
            background-color: darken(#3498db, 5%);

            &:after {
              transform: translate(-50%, -150%) scale(1);
              opacity: 1;
            }
          }

          &.off {
            opacity: 0.5;
          }

          .icon {
            flex-grow: 1;
            background-repeat: no-repeat;
            padding: 10px;
            display: block;
          }
        }
      }

      &.range {
        padding: 0.9em 0;
        width: 100%;
        position: relative;
        display: flex;

        .title {
          width: 100%;
          text-align: left;
          text-transform: capitalize;
          display: inline-block;
          font-size: 1em;
          position: absolute;
          top: 0%;
          color: rgba(180, 180, 180, 0.5);
          text-indent: 10%;
          pointer-events: none;
          transition: all 0.2s;
          z-index: -1;
          line-height: 1;
          padding: 0;
          margin: 0;
        }

        .amount {
          width: 20%;
          display: inline-flex;
          font-size: 0.7em;
          justify-content: flex-end;
          align-items: center;
        }

        .range {
          width: 75%;
          display: inline-flex;
          align-items: center;
        }
      }

      &.color {
        $color: rgba(180, 180, 180, 0.7);

        margin-bottom: 10px;
        width: 100%;
        border: 1px solid $color;
        border-radius: 5px;
        overflow: hidden;
        padding: 3px 5px;

        > span {
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .color-box {
          width: 20%;
          position: relative;

          > span {
            position: absolute;
            top: 10%;
            left: 10%;
            width: 80%;
            height: 80%;
            cursor: pointer;

            &::after,
            &::before {
              position: absolute;
              top: 0%;
              right: -30%;
              height: 100%;
              width: 1px;
              background-color: $color;
              content: '';
            }

            &::before {
              left: -30%;
            }
          }
        }

        .color-input {
          flex-grow: 1;
        }

        .color-stop {
          width: 30%;

          input {
            text-align: center;
          }
        }

        .color-delete {
          width: 10%;
          transition: all 0.2s;
          font-size: 2em;
          cursor: pointer;
          opacity: 0.5;

          &:hover:not(.disabled) {
            opacity: 1;
          }

          &.disabled {
            opacity: 0;
            cursor: default;
          }
        }

        input {
          padding: 5px 10px;
          border: 0px solid gray;
          width: 100%;
          outline: 0;
        }
      }

      &.circle {
        position: relative;
        justify-content: center;

        .circle-range {
          width: 7rem;
          height: 7rem;
          border: 0.2rem solid #2980b9;
          border-radius: 50%;
          position: relative;
          box-sizing: border-box;

          .circle-range-knob {
            height: 100%;
            width: 100%;
            position: absolute;
            box-sizing: border-box;

            &::before {
              position: absolute;
              top: 0;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 0.8rem;
              height: 0.8rem;
              background-color: #2c3e50;
              content: '';
              border-radius: 50%;
              cursor: pointer;
            }
          }
        }

        .amount {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 1.5em;
          text-align: center;
          display: flex;
          flex-direction: column;

          input {
            border: 0px solid;
            width: auto;
            text-align: center;
            font-size: 1.2em;
          }

          span:last-child {
            font-size: 0.7em;
          }
        }
      }

      &.switch {
        display: flex;
        margin: 1.2em 0;
        color: rgba(180, 180, 180, 0.5);
        flex-direction: column;

        input {
          display: none;

          &:checked + label {
            background-color: #3498db;

            .switch {
              left: 55%;
            }
          }
        }

        label {
          width: 30px;
          height: 15px;
          border-radius: 10px;
          background-color: gray;
          display: inline-block;
          margin-right: 10px;
          position: relative;
          transition: all 0.3s;
          cursor: pointer;

          span {
            background-color: white;
            height: 80%;
            width: 40%;
            position: absolute;
            border-radius: 50%;
            left: 5%;
            top: 8%;
            transition: all 0.3s;
          }
        }
      }
    }
  }
}

input[type='range'] {
  $thumb: #3498db;
  $size: 10px;
  $width: 100%;
  $height: 3px;
  $track-color: #ddd;
  $track-focus: lighten($thumb, 15%);

  /* fix for FF unable to apply focus style bug  */
  border: 1px solid transparent;

  /*required for proper track sizing in FF*/
  width: 100%;

  /* Webkit */
  -webkit-appearance: none;

  &::-webkit-slider-runnable-track {
    width: $width;
    height: $height;
    background: $track-color;
    border: none;
    border-radius: 3px;
    transition: all 0.2s;
  }

  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: $size;
    width: $size;
    border-radius: 50%;
    background: $thumb;
    margin-top: -4px;
  }

  &:focus {
    outline: none;

    &::-moz-range-track {
      background: $track-focus;
    }

    &::-webkit-slider-runnable-track {
      background: $track-focus;
    }

    &::-ms-fill-lower {
      background: $track-focus;
    }

    &::-ms-fill-upper {
      background: $track-focus;
    }
  }

  /* FF */
  &::-moz-range-track {
    width: $width;
    height: $height;
    background: $track-color;
    border: none;
    border-radius: 3px;
    transition: all 0.2s;
    z-index: 2;
  }

  &::-moz-range-thumb {
    border: none;
    height: $size;
    width: $size;
    border-radius: 50%;
    background: $thumb;
    z-index: 2;
  }

  /*hide the outline behind the border*/
  &:-moz-focusring {
    outline: 1px solid white;
    outline-offset: -1px;
  }

  /* IE*/
  &::-ms-track {
    width: $width;
    height: $height;

    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;

    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
  }

  &::-ms-fill-lower {
    background: $track-color;
    border-radius: 10px;
  }

  &::-ms-fill-upper {
    background: $track-color;
    border-radius: 10px;
  }

  &::-ms-thumb {
    border: none;
    height: $size;
    width: $size;
    border-radius: 50%;
    background: $thumb;
    transform: translateY(20%);
  }
}

@keyframes move-gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* 
	Hide background animation 
*/
.hide-background-enter-active {
  animation: hide-background 1.5s reverse ease-in forwards;
}

.hide-background-leave-active {
  animation: hide-background 1s ease-in forwards;
}

@keyframes hide-background {
  0% {
    transform: scale(1) perspective(500px) rotateX(0deg);
  }

  50% {
    transform: scale(0.8) perspective(500px) rotateX(2deg);
  }

  100% {
    transform: scale(0.8) perspective(500px) rotateX(2deg) translatey(-120%);
  }
}

/* 
	Show info animation 
*/
.show-info-enter-active {
  animation: show-info 1s ease-in forwards;
}

.show-info-leave-active {
  animation: show-info 1s reverse forwards;
}

@keyframes show-info {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  50% {
    transform: translateY(100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes show-ie {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

              
            
!

JS

              
                var webgradients = [
  {
    style: {
      'background-image': 'linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%)',
    },
    type: 'linear',
    direction: '45',
    colors: [
      {
        value: '#ff9a9e',
        stop: '0',
        status: 'in',
      },
      {
        value: '#fad0c4',
        stop: '99',
        status: 'in',
      },
      {
        value: '#fad0c4',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#a18cd1',
        stop: '0',
        status: 'in',
      },
      {
        value: '#fbc2eb',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#fad0c4',
        stop: '0',
        status: 'in',
      },
      {
        value: '#fad0c4',
        stop: '1',
        status: 'in',
      },
      {
        value: '#ffd1ff',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #ffecd2 0%, #fcb69f 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#ffecd2',
        stop: '0',
        status: 'in',
      },
      {
        value: '#fcb69f',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image':
        'linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#ff8177',
        stop: '0',
        status: 'in',
      },
      {
        value: '#ff867a',
        stop: '0',
        status: 'in',
      },
      {
        value: '#ff8c7f',
        stop: '21',
        status: 'in',
      },
      {
        value: '#f99185',
        stop: '52',
        status: 'in',
      },
      {
        value: '#cf556c',
        stop: '78',
        status: 'in',
      },
      {
        value: '#b12a5b',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#ff9a9e',
        stop: '0',
        status: 'in',
      },
      {
        value: '#fecfef',
        stop: '99',
        status: 'in',
      },
      {
        value: '#fecfef',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(120deg, #f6d365 0%, #fda085 100%)',
    },
    type: 'linear',
    direction: '120',
    colors: [
      {
        value: '#f6d365',
        stop: '0',
        status: 'in',
      },
      {
        value: '#fda085',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#fbc2eb',
        stop: '0',
        status: 'in',
      },
      {
        value: '#a6c1ee',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#fdcbf1',
        stop: '0',
        status: 'in',
      },
      {
        value: '#fdcbf1',
        stop: '1',
        status: 'in',
      },
      {
        value: '#e6dee9',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)',
    },
    type: 'linear',
    direction: '120',
    colors: [
      {
        value: '#a1c4fd',
        stop: '0',
        status: 'in',
      },
      {
        value: '#c2e9fb',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%)',
    },
    type: 'linear',
    direction: '120',
    colors: [
      {
        value: '#d4fc79',
        stop: '0',
        status: 'in',
      },
      {
        value: '#96e6a1',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)',
    },
    type: 'linear',
    direction: '120',
    colors: [
      {
        value: '#84fab0',
        stop: '0',
        status: 'in',
      },
      {
        value: '#8fd3f4',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#cfd9df',
        stop: '0',
        status: 'in',
      },
      {
        value: '#e2ebf0',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(120deg, #a6c0fe 0%, #f68084 100%)',
    },
    type: 'linear',
    direction: '120',
    colors: [
      {
        value: '#a6c0fe',
        stop: '0',
        status: 'in',
      },
      {
        value: '#f68084',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(120deg, #fccb90 0%, #d57eeb 100%)',
    },
    type: 'linear',
    direction: '120',
    colors: [
      {
        value: '#fccb90',
        stop: '0',
        status: 'in',
      },
      {
        value: '#d57eeb',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%)',
    },
    type: 'linear',
    direction: '120',
    colors: [
      {
        value: '#e0c3fc',
        stop: '0',
        status: 'in',
      },
      {
        value: '#8ec5fc',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(120deg, #f093fb 0%, #f5576c 100%)',
    },
    type: 'linear',
    direction: '120',
    colors: [
      {
        value: '#f093fb',
        stop: '0',
        status: 'in',
      },
      {
        value: '#f5576c',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%)',
    },
    type: 'linear',
    direction: '120',
    colors: [
      {
        value: '#fdfbfb',
        stop: '0',
        status: 'in',
      },
      {
        value: '#ebedee',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #4facfe 0%, #00f2fe 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#4facfe',
        stop: '0',
        status: 'in',
      },
      {
        value: '#00f2fe',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #43e97b 0%, #38f9d7 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#43e97b',
        stop: '0',
        status: 'in',
      },
      {
        value: '#38f9d7',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #fa709a 0%, #fee140 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#fa709a',
        stop: '0',
        status: 'in',
      },
      {
        value: '#fee140',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #30cfd0 0%, #330867 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#30cfd0',
        stop: '0',
        status: 'in',
      },
      {
        value: '#330867',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #a8edea 0%, #fed6e3 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#a8edea',
        stop: '0',
        status: 'in',
      },
      {
        value: '#fed6e3',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #5ee7df 0%, #b490ca 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#5ee7df',
        stop: '0',
        status: 'in',
      },
      {
        value: '#b490ca',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #d299c2 0%, #fef9d7 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#d299c2',
        stop: '0',
        status: 'in',
      },
      {
        value: '#fef9d7',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#f5f7fa',
        stop: '0',
        status: 'in',
      },
      {
        value: '#c3cfe2',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#667eea',
        stop: '0',
        status: 'in',
      },
      {
        value: '#764ba2',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#fdfcfb',
        stop: '0',
        status: 'in',
      },
      {
        value: '#e2d1c3',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%)',
    },
    type: 'linear',
    direction: '120',
    colors: [
      {
        value: '#89f7fe',
        stop: '0',
        status: 'in',
      },
      {
        value: '#66a6ff',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #fddb92 0%, #d1fdff 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#fddb92',
        stop: '0',
        status: 'in',
      },
      {
        value: '#d1fdff',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #9890e3 0%, #b1f4cf 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#9890e3',
        stop: '0',
        status: 'in',
      },
      {
        value: '#b1f4cf',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #ebc0fd 0%, #d9ded8 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#ebc0fd',
        stop: '0',
        status: 'in',
      },
      {
        value: '#d9ded8',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #96fbc4 0%, #f9f586 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#96fbc4',
        stop: '0',
        status: 'in',
      },
      {
        value: '#f9f586',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(180deg, #2af598 0%, #009efd 100%)',
    },
    type: 'linear',
    direction: '180',
    colors: [
      {
        value: '#2af598',
        stop: '0',
        status: 'in',
      },
      {
        value: '#009efd',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #cd9cf2 0%, #f6f3ff 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#cd9cf2',
        stop: '0',
        status: 'in',
      },
      {
        value: '#f6f3ff',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image':
        'linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#e4afcb',
        stop: '0',
        status: 'in',
      },
      {
        value: '#b8cbb8',
        stop: '0',
        status: 'in',
      },
      {
        value: '#b8cbb8',
        stop: '0',
        status: 'in',
      },
      {
        value: '#e2c58b',
        stop: '30',
        status: 'in',
      },
      {
        value: '#c2ce9c',
        stop: '64',
        status: 'in',
      },
      {
        value: '#7edbdc',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image':
        'linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#b8cbb8',
        stop: '0',
        status: 'in',
      },
      {
        value: '#b8cbb8',
        stop: '0',
        status: 'in',
      },
      {
        value: '#b465da',
        stop: '0',
        status: 'in',
      },
      {
        value: '#cf6cc9',
        stop: '33',
        status: 'in',
      },
      {
        value: '#ee609c',
        stop: '66',
        status: 'in',
      },
      {
        value: '#ee609c',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #6a11cb 0%, #2575fc 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#6a11cb',
        stop: '0',
        status: 'in',
      },
      {
        value: '#2575fc',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #37ecba 0%, #72afd3 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#37ecba',
        stop: '0',
        status: 'in',
      },
      {
        value: '#72afd3',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #ebbba7 0%, #cfc7f8 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#ebbba7',
        stop: '0',
        status: 'in',
      },
      {
        value: '#cfc7f8',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #fff1eb 0%, #ace0f9 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#fff1eb',
        stop: '0',
        status: 'in',
      },
      {
        value: '#ace0f9',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#eea2a2',
        stop: '0',
        status: 'in',
      },
      {
        value: '#bbc1bf',
        stop: '19',
        status: 'in',
      },
      {
        value: '#57c6e1',
        stop: '42',
        status: 'in',
      },
      {
        value: '#b49fda',
        stop: '79',
        status: 'in',
      },
      {
        value: '#7ac5d8',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #c471f5 0%, #fa71cd 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#c471f5',
        stop: '0',
        status: 'in',
      },
      {
        value: '#fa71cd',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #48c6ef 0%, #6f86d6 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#48c6ef',
        stop: '0',
        status: 'in',
      },
      {
        value: '#6f86d6',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#f78ca0',
        stop: '0',
        status: 'in',
      },
      {
        value: '#f9748f',
        stop: '19',
        status: 'in',
      },
      {
        value: '#fd868c',
        stop: '60',
        status: 'in',
      },
      {
        value: '#fe9a8b',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #feada6 0%, #f5efef 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#feada6',
        stop: '0',
        status: 'in',
      },
      {
        value: '#f5efef',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#e6e9f0',
        stop: '0',
        status: 'in',
      },
      {
        value: '#eef1f5',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #accbee 0%, #e7f0fd 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#accbee',
        stop: '0',
        status: 'in',
      },
      {
        value: '#e7f0fd',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%)',
    },
    type: 'linear',
    direction: '-20',
    colors: [
      {
        value: '#e9defa',
        stop: '0',
        status: 'in',
      },
      {
        value: '#fbfcdb',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #c1dfc4 0%, #deecdd 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#c1dfc4',
        stop: '0',
        status: 'in',
      },
      {
        value: '#deecdd',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #0ba360 0%, #3cba92 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#0ba360',
        stop: '0',
        status: 'in',
      },
      {
        value: '#3cba92',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #00c6fb 0%, #005bea 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#00c6fb',
        stop: '0',
        status: 'in',
      },
      {
        value: '#005bea',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #74ebd5 0%, #9face6 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#74ebd5',
        stop: '0',
        status: 'in',
      },
      {
        value: '#9face6',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #6a85b6 0%, #bac8e0 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#6a85b6',
        stop: '0',
        status: 'in',
      },
      {
        value: '#bac8e0',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #a3bded 0%, #6991c7 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#a3bded',
        stop: '0',
        status: 'in',
      },
      {
        value: '#6991c7',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #9795f0 0%, #fbc8d4 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#9795f0',
        stop: '0',
        status: 'in',
      },
      {
        value: '#fbc8d4',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #a7a6cb 0%, #8989ba 52%, #8989ba 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#a7a6cb',
        stop: '0',
        status: 'in',
      },
      {
        value: '#8989ba',
        stop: '52',
        status: 'in',
      },
      {
        value: '#8989ba',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image':
        'linear-gradient(to top, #3f51b1 0%, #5a55ae 13%, #7b5fac 25%, #8f6aae 38%, #a86aa4 50%, #cc6b8e 62%, #f18271 75%, #f3a469 87%, #f7c978 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#3f51b1',
        stop: '0',
        status: 'in',
      },
      {
        value: '#5a55ae',
        stop: '13',
        status: 'in',
      },
      {
        value: '#7b5fac',
        stop: '25',
        status: 'in',
      },
      {
        value: '#8f6aae',
        stop: '38',
        status: 'in',
      },
      {
        value: '#a86aa4',
        stop: '50',
        status: 'in',
      },
      {
        value: '#cc6b8e',
        stop: '62',
        status: 'in',
      },
      {
        value: '#f18271',
        stop: '75',
        status: 'in',
      },
      {
        value: '#f3a469',
        stop: '87',
        status: 'in',
      },
      {
        value: '#f7c978',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image':
        'linear-gradient(to top, #fcc5e4 0%, #fda34b 15%, #ff7882 35%, #c8699e 52%, #7046aa 71%, #0c1db8 87%, #020f75 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#fcc5e4',
        stop: '0',
        status: 'in',
      },
      {
        value: '#fda34b',
        stop: '15',
        status: 'in',
      },
      {
        value: '#ff7882',
        stop: '35',
        status: 'in',
      },
      {
        value: '#c8699e',
        stop: '52',
        status: 'in',
      },
      {
        value: '#7046aa',
        stop: '71',
        status: 'in',
      },
      {
        value: '#0c1db8',
        stop: '87',
        status: 'in',
      },
      {
        value: '#020f75',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image':
        'linear-gradient(to top, #dbdcd7 0%, #dddcd7 24%, #e2c9cc 30%, #e7627d 46%, #b8235a 59%, #801357 71%, #3d1635 84%, #1c1a27 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#dbdcd7',
        stop: '0',
        status: 'in',
      },
      {
        value: '#dddcd7',
        stop: '24',
        status: 'in',
      },
      {
        value: '#e2c9cc',
        stop: '30',
        status: 'in',
      },
      {
        value: '#e7627d',
        stop: '46',
        status: 'in',
      },
      {
        value: '#b8235a',
        stop: '59',
        status: 'in',
      },
      {
        value: '#801357',
        stop: '71',
        status: 'in',
      },
      {
        value: '#3d1635',
        stop: '84',
        status: 'in',
      },
      {
        value: '#1c1a27',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #f43b47 0%, #453a94 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#f43b47',
        stop: '0',
        status: 'in',
      },
      {
        value: '#453a94',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image':
        'linear-gradient(to top, #4fb576 0%, #44c489 30%, #28a9ae 46%, #28a2b7 59%, #4c7788 71%, #6c4f63 86%, #432c39 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#4fb576',
        stop: '0',
        status: 'in',
      },
      {
        value: '#44c489',
        stop: '30',
        status: 'in',
      },
      {
        value: '#28a9ae',
        stop: '46',
        status: 'in',
      },
      {
        value: '#28a2b7',
        stop: '59',
        status: 'in',
      },
      {
        value: '#4c7788',
        stop: '71',
        status: 'in',
      },
      {
        value: '#6c4f63',
        stop: '86',
        status: 'in',
      },
      {
        value: '#432c39',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #0250c5 0%, #d43f8d 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#0250c5',
        stop: '0',
        status: 'in',
      },
      {
        value: '#d43f8d',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #88d3ce 0%, #6e45e2 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#88d3ce',
        stop: '0',
        status: 'in',
      },
      {
        value: '#6e45e2',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #d9afd9 0%, #97d9e1 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#d9afd9',
        stop: '0',
        status: 'in',
      },
      {
        value: '#97d9e1',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #7028e4 0%, #e5b2ca 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#7028e4',
        stop: '0',
        status: 'in',
      },
      {
        value: '#e5b2ca',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(15deg, #13547a 0%, #80d0c7 100%)',
    },
    type: 'linear',
    direction: '15',
    colors: [
      {
        value: '#13547a',
        stop: '0',
        status: 'in',
      },
      {
        value: '#80d0c7',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image':
        'linear-gradient(to top, #505285 0%, #585e92 12%, #65689f 25%, #7474b0 37%, #7e7ebb 50%, #8389c7 62%, #9795d4 75%, #a2a1dc 87%, #b5aee4 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#505285',
        stop: '0',
        status: 'in',
      },
      {
        value: '#585e92',
        stop: '12',
        status: 'in',
      },
      {
        value: '#65689f',
        stop: '25',
        status: 'in',
      },
      {
        value: '#7474b0',
        stop: '37',
        status: 'in',
      },
      {
        value: '#7e7ebb',
        stop: '50',
        status: 'in',
      },
      {
        value: '#8389c7',
        stop: '62',
        status: 'in',
      },
      {
        value: '#9795d4',
        stop: '75',
        status: 'in',
      },
      {
        value: '#a2a1dc',
        stop: '87',
        status: 'in',
      },
      {
        value: '#b5aee4',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #ff0844 0%, #ffb199 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#ff0844',
        stop: '0',
        status: 'in',
      },
      {
        value: '#ffb199',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%)',
    },
    type: 'linear',
    direction: '45',
    colors: [
      {
        value: '#93a5cf',
        stop: '0',
        status: 'in',
      },
      {
        value: '#e4efe9',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #434343 0%, black 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#434343',
        stop: '0',
        status: 'in',
      },
      {
        value: 'black',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #0c3483 0%, #a2b6df 100%, #6b8cce 100%, #a2b6df 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#0c3483',
        stop: '0',
        status: 'in',
      },
      {
        value: '#a2b6df',
        stop: '100',
        status: 'in',
      },
      {
        value: '#6b8cce',
        stop: '100',
        status: 'in',
      },
      {
        value: '#a2b6df',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%)',
    },
    type: 'linear',
    direction: '45',
    colors: [
      {
        value: '#93a5cf',
        stop: '0',
        status: 'in',
      },
      {
        value: '#e4efe9',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #92fe9d 0%, #00c9ff 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#92fe9d',
        stop: '0',
        status: 'in',
      },
      {
        value: '#00c9ff',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #ff758c 0%, #ff7eb3 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#ff758c',
        stop: '0',
        status: 'in',
      },
      {
        value: '#ff7eb3',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #868f96 0%, #596164 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#868f96',
        stop: '0',
        status: 'in',
      },
      {
        value: '#596164',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #c79081 0%, #dfa579 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#c79081',
        stop: '0',
        status: 'in',
      },
      {
        value: '#dfa579',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(45deg, #8baaaa 0%, #ae8b9c 100%)',
    },
    type: 'linear',
    direction: '45',
    colors: [
      {
        value: '#8baaaa',
        stop: '0',
        status: 'in',
      },
      {
        value: '#ae8b9c',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #f83600 0%, #f9d423 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#f83600',
        stop: '0',
        status: 'in',
      },
      {
        value: '#f9d423',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%)',
    },
    type: 'linear',
    direction: '-20',
    colors: [
      {
        value: '#b721ff',
        stop: '0',
        status: 'in',
      },
      {
        value: '#21d4fd',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(-20deg, #6e45e2 0%, #88d3ce 100%)',
    },
    type: 'linear',
    direction: '-20',
    colors: [
      {
        value: '#6e45e2',
        stop: '0',
        status: 'in',
      },
      {
        value: '#88d3ce',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(-20deg, #d558c8 0%, #24d292 100%)',
    },
    type: 'linear',
    direction: '-20',
    colors: [
      {
        value: '#d558c8',
        stop: '0',
        status: 'in',
      },
      {
        value: '#24d292',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(60deg, #abecd6 0%, #fbed96 100%)',
    },
    type: 'linear',
    direction: '60',
    colors: [
      {
        value: '#abecd6',
        stop: '0',
        status: 'in',
      },
      {
        value: '#fbed96',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#d5d4d0',
        stop: '0',
        status: 'in',
      },
      {
        value: '#d5d4d0',
        stop: '1',
        status: 'in',
      },
      {
        value: '#eeeeec',
        stop: '31',
        status: 'in',
      },
      {
        value: '#efeeec',
        stop: '75',
        status: 'in',
      },
      {
        value: '#e9e9e7',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #5f72bd 0%, #9b23ea 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#5f72bd',
        stop: '0',
        status: 'in',
      },
      {
        value: '#9b23ea',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #09203f 0%, #537895 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#09203f',
        stop: '0',
        status: 'in',
      },
      {
        value: '#537895',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%)',
    },
    type: 'linear',
    direction: '-20',
    colors: [
      {
        value: '#ddd6f3',
        stop: '0',
        status: 'in',
      },
      {
        value: '#faaca8',
        stop: '100',
        status: 'in',
      },
      {
        value: '#faaca8',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(-20deg, #dcb0ed 0%, #99c99c 100%)',
    },
    type: 'linear',
    direction: '-20',
    colors: [
      {
        value: '#dcb0ed',
        stop: '0',
        status: 'in',
      },
      {
        value: '#99c99c',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#f3e7e9',
        stop: '0',
        status: 'in',
      },
      {
        value: '#e3eeff',
        stop: '99',
        status: 'in',
      },
      {
        value: '#e3eeff',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #c71d6f 0%, #d09693 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#c71d6f',
        stop: '0',
        status: 'in',
      },
      {
        value: '#d09693',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(60deg, #96deda 0%, #50c9c3 100%)',
    },
    type: 'linear',
    direction: '60',
    colors: [
      {
        value: '#96deda',
        stop: '0',
        status: 'in',
      },
      {
        value: '#50c9c3',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #f77062 0%, #fe5196 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#f77062',
        stop: '0',
        status: 'in',
      },
      {
        value: '#fe5196',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#c4c5c7',
        stop: '0',
        status: 'in',
      },
      {
        value: '#dcdddf',
        stop: '52',
        status: 'in',
      },
      {
        value: '#ebebeb',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #a8caba 0%, #5d4157 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#a8caba',
        stop: '0',
        status: 'in',
      },
      {
        value: '#5d4157',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(60deg, #29323c 0%, #485563 100%)',
    },
    type: 'linear',
    direction: '60',
    colors: [
      {
        value: '#29323c',
        stop: '0',
        status: 'in',
      },
      {
        value: '#485563',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(-60deg, #16a085 0%, #f4d03f 100%)',
    },
    type: 'linear',
    direction: '-60',
    colors: [
      {
        value: '#16a085',
        stop: '0',
        status: 'in',
      },
      {
        value: '#f4d03f',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(-60deg, #ff5858 0%, #f09819 100%)',
    },
    type: 'linear',
    direction: '-60',
    colors: [
      {
        value: '#ff5858',
        stop: '0',
        status: 'in',
      },
      {
        value: '#f09819',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(-20deg, #2b5876 0%, #4e4376 100%)',
    },
    type: 'linear',
    direction: '-20',
    colors: [
      {
        value: '#2b5876',
        stop: '0',
        status: 'in',
      },
      {
        value: '#4e4376',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%)',
    },
    type: 'linear',
    direction: '-20',
    colors: [
      {
        value: '#00cdac',
        stop: '0',
        status: 'in',
      },
      {
        value: '#8ddad5',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #4481eb 0%, #04befe 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#4481eb',
        stop: '0',
        status: 'in',
      },
      {
        value: '#04befe',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #dad4ec 0%, #dad4ec 1%, #f3e7e9 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#dad4ec',
        stop: '0',
        status: 'in',
      },
      {
        value: '#dad4ec',
        stop: '1',
        status: 'in',
      },
      {
        value: '#f3e7e9',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(45deg, #874da2 0%, #c43a30 100%)',
    },
    type: 'linear',
    direction: '45',
    colors: [
      {
        value: '#874da2',
        stop: '0',
        status: 'in',
      },
      {
        value: '#c43a30',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #4481eb 0%, #04befe 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#4481eb',
        stop: '0',
        status: 'in',
      },
      {
        value: '#04befe',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #e8198b 0%, #c7eafd 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#e8198b',
        stop: '0',
        status: 'in',
      },
      {
        value: '#c7eafd',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(-20deg, #f794a4 0%, #fdd6bd 100%)',
    },
    type: 'linear',
    direction: '-20',
    colors: [
      {
        value: '#f794a4',
        stop: '0',
        status: 'in',
      },
      {
        value: '#fdd6bd',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%)',
    },
    type: 'linear',
    direction: '60',
    colors: [
      {
        value: '#64b3f4',
        stop: '0',
        status: 'in',
      },
      {
        value: '#c2e59c',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #3b41c5 0%, #a981bb 49%, #ffc8a9 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#3b41c5',
        stop: '0',
        status: 'in',
      },
      {
        value: '#a981bb',
        stop: '49',
        status: 'in',
      },
      {
        value: '#ffc8a9',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #0fd850 0%, #f9f047 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#0fd850',
        stop: '0',
        status: 'in',
      },
      {
        value: '#f9f047',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image':
        'linear-gradient(to top, lightgrey 0%, lightgrey 1%, #e0e0e0 26%, #efefef 48%, #d9d9d9 75%, #bcbcbc 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: 'lightgrey',
        stop: '0',
        status: 'in',
      },
      {
        value: 'lightgrey',
        stop: '1',
        status: 'in',
      },
      {
        value: '#e0e0e0',
        stop: '26',
        status: 'in',
      },
      {
        value: '#efefef',
        stop: '48',
        status: 'in',
      },
      {
        value: '#d9d9d9',
        stop: '75',
        status: 'in',
      },
      {
        value: '#bcbcbc',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(45deg, #ee9ca7 0%, #ffdde1 100%)',
    },
    type: 'linear',
    direction: '45',
    colors: [
      {
        value: '#ee9ca7',
        stop: '0',
        status: 'in',
      },
      {
        value: '#ffdde1',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #3ab5b0 0%, #3d99be 31%, #56317a 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#3ab5b0',
        stop: '0',
        status: 'in',
      },
      {
        value: '#3d99be',
        stop: '31',
        status: 'in',
      },
      {
        value: '#56317a',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #209cff 0%, #68e0cf 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#209cff',
        stop: '0',
        status: 'in',
      },
      {
        value: '#68e0cf',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #bdc2e8 0%, #bdc2e8 1%, #e6dee9 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#bdc2e8',
        stop: '0',
        status: 'in',
      },
      {
        value: '#bdc2e8',
        stop: '1',
        status: 'in',
      },
      {
        value: '#e6dee9',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #e6b980 0%, #eacda3 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#e6b980',
        stop: '0',
        status: 'in',
      },
      {
        value: '#eacda3',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#1e3c72',
        stop: '0',
        status: 'in',
      },
      {
        value: '#1e3c72',
        stop: '1',
        status: 'in',
      },
      {
        value: '#2a5298',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #d5dee7 0%, #ffafbd 0%, #c9ffbf 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#d5dee7',
        stop: '0',
        status: 'in',
      },
      {
        value: '#ffafbd',
        stop: '0',
        status: 'in',
      },
      {
        value: '#c9ffbf',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #9be15d 0%, #00e3ae 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#9be15d',
        stop: '0',
        status: 'in',
      },
      {
        value: '#00e3ae',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #ed6ea0 0%, #ec8c69 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#ed6ea0',
        stop: '0',
        status: 'in',
      },
      {
        value: '#ec8c69',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #ffc3a0 0%, #ffafbd 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#ffc3a0',
        stop: '0',
        status: 'in',
      },
      {
        value: '#ffafbd',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #cc208e 0%, #6713d2 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#cc208e',
        stop: '0',
        status: 'in',
      },
      {
        value: '#6713d2',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #b3ffab 0%, #12fff7 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#b3ffab',
        stop: '0',
        status: 'in',
      },
      {
        value: '#12fff7',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #65bd60 0%, #5ac1a8 25%, #3ec6ed 50%, #b7ddb7 75%, #fef381 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#65bd60',
        stop: '0',
        status: 'in',
      },
      {
        value: '#5ac1a8',
        stop: '25',
        status: 'in',
      },
      {
        value: '#3ec6ed',
        stop: '50',
        status: 'in',
      },
      {
        value: '#b7ddb7',
        stop: '75',
        status: 'in',
      },
      {
        value: '#fef381',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #243949 0%, #517fa4 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#243949',
        stop: '0',
        status: 'in',
      },
      {
        value: '#517fa4',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%)',
    },
    type: 'linear',
    direction: '-20',
    colors: [
      {
        value: '#fc6076',
        stop: '0',
        status: 'in',
      },
      {
        value: '#ff9a44',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #dfe9f3 0%, white 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#dfe9f3',
        stop: '0',
        status: 'in',
      },
      {
        value: 'white',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #00dbde 0%, #fc00ff 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#00dbde',
        stop: '0',
        status: 'in',
      },
      {
        value: '#fc00ff',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #50cc7f 0%, #f5d100 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#50cc7f',
        stop: '0',
        status: 'in',
      },
      {
        value: '#f5d100',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #0acffe 0%, #495aff 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#0acffe',
        stop: '0',
        status: 'in',
      },
      {
        value: '#495aff',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(-20deg, #616161 0%, #9bc5c3 100%)',
    },
    type: 'linear',
    direction: '-20',
    colors: [
      {
        value: '#616161',
        stop: '0',
        status: 'in',
      },
      {
        value: '#9bc5c3',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)',
    },
    type: 'linear',
    direction: '60',
    colors: [
      {
        value: '#3d3393',
        stop: '0',
        status: 'in',
      },
      {
        value: '#2b76b9',
        stop: '37',
        status: 'in',
      },
      {
        value: '#2cacd1',
        stop: '65',
        status: 'in',
      },
      {
        value: '#35eb93',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #df89b5 0%, #bfd9fe 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#df89b5',
        stop: '0',
        status: 'in',
      },
      {
        value: '#bfd9fe',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #ed6ea0 0%, #ec8c69 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#ed6ea0',
        stop: '0',
        status: 'in',
      },
      {
        value: '#ec8c69',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #d7d2cc 0%, #304352 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#d7d2cc',
        stop: '0',
        status: 'in',
      },
      {
        value: '#304352',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #e14fad 0%, #f9d423 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#e14fad',
        stop: '0',
        status: 'in',
      },
      {
        value: '#f9d423',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #b224ef 0%, #7579ff 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#b224ef',
        stop: '0',
        status: 'in',
      },
      {
        value: '#7579ff',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #c1c161 0%, #c1c161 0%, #d4d4b1 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#c1c161',
        stop: '0',
        status: 'in',
      },
      {
        value: '#c1c161',
        stop: '0',
        status: 'in',
      },
      {
        value: '#d4d4b1',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to right, #ec77ab 0%, #7873f5 100%)',
    },
    type: 'linear',
    direction: '90',
    colors: [
      {
        value: '#ec77ab',
        stop: '0',
        status: 'in',
      },
      {
        value: '#7873f5',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(to top, #007adf 0%, #00ecbc 100%)',
    },
    type: 'linear',
    direction: '0',
    colors: [
      {
        value: '#007adf',
        stop: '0',
        status: 'in',
      },
      {
        value: '#00ecbc',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #20E2D7 0%, #F9FEA5 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#20E2D7',
        stop: '0',
        status: 'in',
      },
      {
        value: '#F9FEA5',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#2CD8D5',
        stop: '0',
        status: 'in',
      },
      {
        value: '#C5C1FF',
        stop: '56',
        status: 'in',
      },
      {
        value: '#FFBAC3',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #2CD8D5 0%, #6B8DD6 48%, #8E37D7 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#2CD8D5',
        stop: '0',
        status: 'in',
      },
      {
        value: '#6B8DD6',
        stop: '48',
        status: 'in',
      },
      {
        value: '#8E37D7',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #DFFFCD 0%, #90F9C4 48%, #39F3BB 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#DFFFCD',
        stop: '0',
        status: 'in',
      },
      {
        value: '#90F9C4',
        stop: '48',
        status: 'in',
      },
      {
        value: '#39F3BB',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #5D9FFF 0%, #B8DCFF 48%, #6BBBFF 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#5D9FFF',
        stop: '0',
        status: 'in',
      },
      {
        value: '#B8DCFF',
        stop: '48',
        status: 'in',
      },
      {
        value: '#6BBBFF',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #A8BFFF 0%, #884D80 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#A8BFFF',
        stop: '0',
        status: 'in',
      },
      {
        value: '#884D80',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #5271C4 0%, #B19FFF 48%, #ECA1FE 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#5271C4',
        stop: '0',
        status: 'in',
      },
      {
        value: '#B19FFF',
        stop: '48',
        status: 'in',
      },
      {
        value: '#ECA1FE',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #FFE29F 0%, #FFA99F 48%, #FF719A 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#FFE29F',
        stop: '0',
        status: 'in',
      },
      {
        value: '#FFA99F',
        stop: '48',
        status: 'in',
      },
      {
        value: '#FF719A',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#22E1FF',
        stop: '0',
        status: 'in',
      },
      {
        value: '#1D8FE1',
        stop: '48',
        status: 'in',
      },
      {
        value: '#625EB1',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #B6CEE8 0%, #F578DC 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#B6CEE8',
        stop: '0',
        status: 'in',
      },
      {
        value: '#F578DC',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #FFFEFF 0%, #D7FFFE 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#FFFEFF',
        stop: '0',
        status: 'in',
      },
      {
        value: '#D7FFFE',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #E3FDF5 0%, #FFE6FA 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#E3FDF5',
        stop: '0',
        status: 'in',
      },
      {
        value: '#FFE6FA',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #7DE2FC 0%, #B9B6E5 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#7DE2FC',
        stop: '0',
        status: 'in',
      },
      {
        value: '#B9B6E5',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #CBBACC 0%, #2580B3 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#CBBACC',
        stop: '0',
        status: 'in',
      },
      {
        value: '#2580B3',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #B7F8DB 0%, #50A7C2 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#B7F8DB',
        stop: '0',
        status: 'in',
      },
      {
        value: '#50A7C2',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #7085B6 0%, #87A7D9 50%, #DEF3F8 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#7085B6',
        stop: '0',
        status: 'in',
      },
      {
        value: '#87A7D9',
        stop: '50',
        status: 'in',
      },
      {
        value: '#DEF3F8',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #77FFD2 0%, #6297DB 48%, #1EECFF 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#77FFD2',
        stop: '0',
        status: 'in',
      },
      {
        value: '#6297DB',
        stop: '48',
        status: 'in',
      },
      {
        value: '#1EECFF',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #AC32E4 0%, #7918F2 48%, #4801FF 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#AC32E4',
        stop: '0',
        status: 'in',
      },
      {
        value: '#7918F2',
        stop: '48',
        status: 'in',
      },
      {
        value: '#4801FF',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#D4FFEC',
        stop: '0',
        status: 'in',
      },
      {
        value: '#57F2CC',
        stop: '48',
        status: 'in',
      },
      {
        value: '#4596FB',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #9EFBD3 0%, #57E9F2 48%, #45D4FB 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#9EFBD3',
        stop: '0',
        status: 'in',
      },
      {
        value: '#57E9F2',
        stop: '48',
        status: 'in',
      },
      {
        value: '#45D4FB',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #473B7B 0%, #3584A7 51%, #30D2BE 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#473B7B',
        stop: '0',
        status: 'in',
      },
      {
        value: '#3584A7',
        stop: '51',
        status: 'in',
      },
      {
        value: '#30D2BE',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #65379B 0%, #886AEA 53%, #6457C6 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#65379B',
        stop: '0',
        status: 'in',
      },
      {
        value: '#886AEA',
        stop: '53',
        status: 'in',
      },
      {
        value: '#6457C6',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #A445B2 0%, #D41872 52%, #FF0066 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#A445B2',
        stop: '0',
        status: 'in',
      },
      {
        value: '#D41872',
        stop: '52',
        status: 'in',
      },
      {
        value: '#FF0066',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #7742B2 0%, #F180FF 52%, #FD8BD9 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#7742B2',
        stop: '0',
        status: 'in',
      },
      {
        value: '#F180FF',
        stop: '52',
        status: 'in',
      },
      {
        value: '#FD8BD9',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#FF3CAC',
        stop: '0',
        status: 'in',
      },
      {
        value: '#562B7C',
        stop: '52',
        status: 'in',
      },
      {
        value: '#2B86C5',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #FF057C 0%, #8D0B93 50%, #321575 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#FF057C',
        stop: '0',
        status: 'in',
      },
      {
        value: '#8D0B93',
        stop: '50',
        status: 'in',
      },
      {
        value: '#321575',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #FF057C 0%, #7C64D5 48%, #4CC3FF 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#FF057C',
        stop: '0',
        status: 'in',
      },
      {
        value: '#7C64D5',
        stop: '48',
        status: 'in',
      },
      {
        value: '#4CC3FF',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #69EACB 0%, #EACCF8 48%, #6654F1 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#69EACB',
        stop: '0',
        status: 'in',
      },
      {
        value: '#EACCF8',
        stop: '48',
        status: 'in',
      },
      {
        value: '#6654F1',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#231557',
        stop: '0',
        status: 'in',
      },
      {
        value: '#44107A',
        stop: '29',
        status: 'in',
      },
      {
        value: '#FF1361',
        stop: '67',
        status: 'in',
      },
      {
        value: '#FFF800',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    style: {
      'background-image': 'linear-gradient(135deg, #3D4E81 0%, #5753C9 48%, #6E7FF3 100%)',
    },
    type: 'linear',
    direction: '135',
    colors: [
      {
        value: '#3D4E81',
        stop: '0',
        status: 'in',
      },
      {
        value: '#5753C9',
        stop: '48',
        status: 'in',
      },
      {
        value: '#6E7FF3',
        stop: '100',
        status: 'in',
      },
    ],
  },
];
var uigradients = [
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#00416A 0%,#E4E5E6 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#00416A',
        stop: 0,
        status: 'in',
      },
      {
        value: '#E4E5E6',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#FFE000 0%,#799F0C 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#FFE000',
        stop: 0,
        status: 'in',
      },
      {
        value: '#799F0C',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#F7F8F8 0%,#ACBB78 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#F7F8F8',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ACBB78',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#00416A 0%,#799F0C 50%,#FFE000 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#00416A',
        stop: 0,
        status: 'in',
      },
      {
        value: '#799F0C',
        stop: '50',
        status: 'in',
      },
      {
        value: '#FFE000',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#334d50 0%,#cbcaa5 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#334d50',
        stop: 0,
        status: 'in',
      },
      {
        value: '#cbcaa5',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#0052D4 0%,#4364F7 50%,#6FB1FC 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#0052D4',
        stop: 0,
        status: 'in',
      },
      {
        value: '#4364F7',
        stop: '50',
        status: 'in',
      },
      {
        value: '#6FB1FC',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#5433FF 0%,#20BDFF 50%,#A5FECB 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#5433FF',
        stop: 0,
        status: 'in',
      },
      {
        value: '#20BDFF',
        stop: '50',
        status: 'in',
      },
      {
        value: '#A5FECB',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#799F0C 0%,#ACBB78 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#799F0C',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ACBB78',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#ffe259 0%,#ffa751 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#ffe259',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ffa751',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#00416A 0%,#E4E5E6 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#00416A',
        stop: 0,
        status: 'in',
      },
      {
        value: '#E4E5E6',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#FFE000 0%,#799F0C 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#FFE000',
        stop: 0,
        status: 'in',
      },
      {
        value: '#799F0C',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#acb6e5 0%,#86fde8 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#acb6e5',
        stop: 0,
        status: 'in',
      },
      {
        value: '#86fde8',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#536976 0%,#292E49 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#536976',
        stop: 0,
        status: 'in',
      },
      {
        value: '#292E49',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#BBD2C5 0%,#536976 50%,#292E49 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#BBD2C5',
        stop: 0,
        status: 'in',
      },
      {
        value: '#536976',
        stop: '50',
        status: 'in',
      },
      {
        value: '#292E49',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#B79891 0%,#94716B 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#B79891',
        stop: 0,
        status: 'in',
      },
      {
        value: '#94716B',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#9796f0 0%,#fbc7d4 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#9796f0',
        stop: 0,
        status: 'in',
      },
      {
        value: '#fbc7d4',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#BBD2C5 0%,#536976 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#BBD2C5',
        stop: 0,
        status: 'in',
      },
      {
        value: '#536976',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#076585 0%,#fff 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#076585',
        stop: 0,
        status: 'in',
      },
      {
        value: '#fff',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#00467F 0%,#A5CC82 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#00467F',
        stop: 0,
        status: 'in',
      },
      {
        value: '#A5CC82',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#1488CC 0%,#2B32B2 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#1488CC',
        stop: 0,
        status: 'in',
      },
      {
        value: '#2B32B2',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#ec008c 0%,#fc6767 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#ec008c',
        stop: 0,
        status: 'in',
      },
      {
        value: '#fc6767',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#cc2b5e 0%,#753a88 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#cc2b5e',
        stop: 0,
        status: 'in',
      },
      {
        value: '#753a88',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#2193b0 0%,#6dd5ed 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#2193b0',
        stop: 0,
        status: 'in',
      },
      {
        value: '#6dd5ed',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#e65c00 0%,#F9D423 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#e65c00',
        stop: 0,
        status: 'in',
      },
      {
        value: '#F9D423',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#2b5876 0%,#4e4376 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#2b5876',
        stop: 0,
        status: 'in',
      },
      {
        value: '#4e4376',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#314755 0%,#26a0da 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#314755',
        stop: 0,
        status: 'in',
      },
      {
        value: '#26a0da',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#77A1D3 0%,#79CBCA 50%,#E684AE 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#77A1D3',
        stop: 0,
        status: 'in',
      },
      {
        value: '#79CBCA',
        stop: '50',
        status: 'in',
      },
      {
        value: '#E684AE',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#ff6e7f 0%,#bfe9ff 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#ff6e7f',
        stop: 0,
        status: 'in',
      },
      {
        value: '#bfe9ff',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#e52d27 0%,#b31217 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#e52d27',
        stop: 0,
        status: 'in',
      },
      {
        value: '#b31217',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#603813 0%,#b29f94 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#603813',
        stop: 0,
        status: 'in',
      },
      {
        value: '#b29f94',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#16A085 0%,#F4D03F 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#16A085',
        stop: 0,
        status: 'in',
      },
      {
        value: '#F4D03F',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#D31027 0%,#EA384D 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#D31027',
        stop: 0,
        status: 'in',
      },
      {
        value: '#EA384D',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#EDE574 0%,#E1F5C4 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#EDE574',
        stop: 0,
        status: 'in',
      },
      {
        value: '#E1F5C4',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#02AAB0 0%,#00CDAC 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#02AAB0',
        stop: 0,
        status: 'in',
      },
      {
        value: '#00CDAC',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#DA22FF 0%,#9733EE 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#DA22FF',
        stop: 0,
        status: 'in',
      },
      {
        value: '#9733EE',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#348F50 0%,#56B4D3 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#348F50',
        stop: 0,
        status: 'in',
      },
      {
        value: '#56B4D3',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#3CA55C 0%,#B5AC49 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#3CA55C',
        stop: 0,
        status: 'in',
      },
      {
        value: '#B5AC49',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#CC95C0 0%,#DBD4B4 50%,#7AA1D2 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#CC95C0',
        stop: 0,
        status: 'in',
      },
      {
        value: '#DBD4B4',
        stop: '50',
        status: 'in',
      },
      {
        value: '#7AA1D2',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#003973 0%,#E5E5BE 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#003973',
        stop: 0,
        status: 'in',
      },
      {
        value: '#E5E5BE',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#E55D87 0%,#5FC3E4 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#E55D87',
        stop: 0,
        status: 'in',
      },
      {
        value: '#5FC3E4',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#403B4A 0%,#E7E9BB 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#403B4A',
        stop: 0,
        status: 'in',
      },
      {
        value: '#E7E9BB',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#F09819 0%,#EDDE5D 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#F09819',
        stop: 0,
        status: 'in',
      },
      {
        value: '#EDDE5D',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#FF512F 0%,#DD2476 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#FF512F',
        stop: 0,
        status: 'in',
      },
      {
        value: '#DD2476',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#AA076B 0%,#61045F 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#AA076B',
        stop: 0,
        status: 'in',
      },
      {
        value: '#61045F',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#1A2980 0%,#26D0CE 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#1A2980',
        stop: 0,
        status: 'in',
      },
      {
        value: '#26D0CE',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#FF512F 0%,#F09819 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#FF512F',
        stop: 0,
        status: 'in',
      },
      {
        value: '#F09819',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#1D2B64 0%,#F8CDDA 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#1D2B64',
        stop: 0,
        status: 'in',
      },
      {
        value: '#F8CDDA',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#1FA2FF 0%,#12D8FA 50%,#A6FFCB 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#1FA2FF',
        stop: 0,
        status: 'in',
      },
      {
        value: '#12D8FA',
        stop: '50',
        status: 'in',
      },
      {
        value: '#A6FFCB',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#4CB8C4 0%,#3CD3AD 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#4CB8C4',
        stop: 0,
        status: 'in',
      },
      {
        value: '#3CD3AD',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#DD5E89 0%,#F7BB97 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#DD5E89',
        stop: 0,
        status: 'in',
      },
      {
        value: '#F7BB97',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#EB3349 0%,#F45C43 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#EB3349',
        stop: 0,
        status: 'in',
      },
      {
        value: '#F45C43',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#1D976C 0%,#93F9B9 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#1D976C',
        stop: 0,
        status: 'in',
      },
      {
        value: '#93F9B9',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#FF8008 0%,#FFC837 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#FF8008',
        stop: 0,
        status: 'in',
      },
      {
        value: '#FFC837',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#16222A 0%,#3A6073 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#16222A',
        stop: 0,
        status: 'in',
      },
      {
        value: '#3A6073',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#1F1C2C 0%,#928DAB 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#1F1C2C',
        stop: 0,
        status: 'in',
      },
      {
        value: '#928DAB',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#614385 0%,#516395 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#614385',
        stop: 0,
        status: 'in',
      },
      {
        value: '#516395',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#4776E6 0%,#8E54E9 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#4776E6',
        stop: 0,
        status: 'in',
      },
      {
        value: '#8E54E9',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#085078 0%,#85D8CE 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#085078',
        stop: 0,
        status: 'in',
      },
      {
        value: '#85D8CE',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#2BC0E4 0%,#EAECC6 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#2BC0E4',
        stop: 0,
        status: 'in',
      },
      {
        value: '#EAECC6',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#134E5E 0%,#71B280 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#134E5E',
        stop: 0,
        status: 'in',
      },
      {
        value: '#71B280',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#5C258D 0%,#4389A2 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#5C258D',
        stop: 0,
        status: 'in',
      },
      {
        value: '#4389A2',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#757F9A 0%,#D7DDE8 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#757F9A',
        stop: 0,
        status: 'in',
      },
      {
        value: '#D7DDE8',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#232526 0%,#414345 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#232526',
        stop: 0,
        status: 'in',
      },
      {
        value: '#414345',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#1CD8D2 0%,#93EDC7 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#1CD8D2',
        stop: 0,
        status: 'in',
      },
      {
        value: '#93EDC7',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#3D7EAA 0%,#FFE47A 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#3D7EAA',
        stop: 0,
        status: 'in',
      },
      {
        value: '#FFE47A',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#283048 0%,#859398 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#283048',
        stop: 0,
        status: 'in',
      },
      {
        value: '#859398',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#24C6DC 0%,#514A9D 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#24C6DC',
        stop: 0,
        status: 'in',
      },
      {
        value: '#514A9D',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#DC2424 0%,#4A569D 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#DC2424',
        stop: 0,
        status: 'in',
      },
      {
        value: '#4A569D',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#ED4264 0%,#FFEDBC 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#ED4264',
        stop: 0,
        status: 'in',
      },
      {
        value: '#FFEDBC',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#DAE2F8 0%,#D6A4A4 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#DAE2F8',
        stop: 0,
        status: 'in',
      },
      {
        value: '#D6A4A4',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#ECE9E6 0%,#FFFFFF 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#ECE9E6',
        stop: 0,
        status: 'in',
      },
      {
        value: '#FFFFFF',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#7474BF 0%,#348AC7 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#7474BF',
        stop: 0,
        status: 'in',
      },
      {
        value: '#348AC7',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#EC6F66 0%,#F3A183 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#EC6F66',
        stop: 0,
        status: 'in',
      },
      {
        value: '#F3A183',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#5f2c82 0%,#49a09d 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#5f2c82',
        stop: 0,
        status: 'in',
      },
      {
        value: '#49a09d',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#C04848 0%,#480048 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#C04848',
        stop: 0,
        status: 'in',
      },
      {
        value: '#480048',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#e43a15 0%,#e65245 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#e43a15',
        stop: 0,
        status: 'in',
      },
      {
        value: '#e65245',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#414d0b 0%,#727a17 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#414d0b',
        stop: 0,
        status: 'in',
      },
      {
        value: '#727a17',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#FC354C 0%,#0ABFBC 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#FC354C',
        stop: 0,
        status: 'in',
      },
      {
        value: '#0ABFBC',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#4b6cb7 0%,#182848 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#4b6cb7',
        stop: 0,
        status: 'in',
      },
      {
        value: '#182848',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#f857a6 0%,#ff5858 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#f857a6',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ff5858',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#a73737 0%,#7a2828 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#a73737',
        stop: 0,
        status: 'in',
      },
      {
        value: '#7a2828',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#d53369 0%,#cbad6d 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#d53369',
        stop: 0,
        status: 'in',
      },
      {
        value: '#cbad6d',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#e9d362 0%,#333333 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#e9d362',
        stop: 0,
        status: 'in',
      },
      {
        value: '#333333',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#DE6262 0%,#FFB88C 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#DE6262',
        stop: 0,
        status: 'in',
      },
      {
        value: '#FFB88C',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#666600 0%,#999966 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#666600',
        stop: 0,
        status: 'in',
      },
      {
        value: '#999966',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#FFEEEE 0%,#DDEFBB 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#FFEEEE',
        stop: 0,
        status: 'in',
      },
      {
        value: '#DDEFBB',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#EFEFBB 0%,#D4D3DD 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#EFEFBB',
        stop: 0,
        status: 'in',
      },
      {
        value: '#D4D3DD',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#c21500 0%,#ffc500 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#c21500',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ffc500',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#215f00 0%,#e4e4d9 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#215f00',
        stop: 0,
        status: 'in',
      },
      {
        value: '#e4e4d9',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#50C9C3 0%,#96DEDA 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#50C9C3',
        stop: 0,
        status: 'in',
      },
      {
        value: '#96DEDA',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#616161 0%,#9bc5c3 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#616161',
        stop: 0,
        status: 'in',
      },
      {
        value: '#9bc5c3',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#ddd6f3 0%,#faaca8 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#ddd6f3',
        stop: 0,
        status: 'in',
      },
      {
        value: '#faaca8',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#5D4157 0%,#A8CABA 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#5D4157',
        stop: 0,
        status: 'in',
      },
      {
        value: '#A8CABA',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#E6DADA 0%,#274046 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#E6DADA',
        stop: 0,
        status: 'in',
      },
      {
        value: '#274046',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#f2709c 0%,#ff9472 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#f2709c',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ff9472',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#DAD299 0%,#B0DAB9 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#DAD299',
        stop: 0,
        status: 'in',
      },
      {
        value: '#B0DAB9',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#D3959B 0%,#BFE6BA 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#D3959B',
        stop: 0,
        status: 'in',
      },
      {
        value: '#BFE6BA',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#00d2ff 0%,#3a7bd5 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#00d2ff',
        stop: 0,
        status: 'in',
      },
      {
        value: '#3a7bd5',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#870000 0%,#190A05 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#870000',
        stop: 0,
        status: 'in',
      },
      {
        value: '#190A05',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#B993D6 0%,#8CA6DB 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#B993D6',
        stop: 0,
        status: 'in',
      },
      {
        value: '#8CA6DB',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#649173 0%,#DBD5A4 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#649173',
        stop: 0,
        status: 'in',
      },
      {
        value: '#DBD5A4',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#C9FFBF 0%,#FFAFBD 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#C9FFBF',
        stop: 0,
        status: 'in',
      },
      {
        value: '#FFAFBD',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#606c88 0%,#3f4c6b 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#606c88',
        stop: 0,
        status: 'in',
      },
      {
        value: '#3f4c6b',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#FBD3E9 0%,#BB377D 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#FBD3E9',
        stop: 0,
        status: 'in',
      },
      {
        value: '#BB377D',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#ADD100 0%,#7B920A 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#ADD100',
        stop: 0,
        status: 'in',
      },
      {
        value: '#7B920A',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#FF4E50 0%,#F9D423 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#FF4E50',
        stop: 0,
        status: 'in',
      },
      {
        value: '#F9D423',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#F0C27B 0%,#4B1248 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#F0C27B',
        stop: 0,
        status: 'in',
      },
      {
        value: '#4B1248',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#000000 0%,#e74c3c 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#000000',
        stop: 0,
        status: 'in',
      },
      {
        value: '#e74c3c',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#AAFFA9 0%,#11FFBD 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#AAFFA9',
        stop: 0,
        status: 'in',
      },
      {
        value: '#11FFBD',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#B3FFAB 0%,#12FFF7 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#B3FFAB',
        stop: 0,
        status: 'in',
      },
      {
        value: '#12FFF7',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#780206 0%,#061161 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#780206',
        stop: 0,
        status: 'in',
      },
      {
        value: '#061161',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#9D50BB 0%,#6E48AA 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#9D50BB',
        stop: 0,
        status: 'in',
      },
      {
        value: '#6E48AA',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#556270 0%,#FF6B6B 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#556270',
        stop: 0,
        status: 'in',
      },
      {
        value: '#FF6B6B',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#70e1f5 0%,#ffd194 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#70e1f5',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ffd194',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#00c6ff 0%,#0072ff 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#00c6ff',
        stop: 0,
        status: 'in',
      },
      {
        value: '#0072ff',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#fe8c00 0%,#f83600 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#fe8c00',
        stop: 0,
        status: 'in',
      },
      {
        value: '#f83600',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#52c234 0%,#061700 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#52c234',
        stop: 0,
        status: 'in',
      },
      {
        value: '#061700',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#485563 0%,#29323c 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#485563',
        stop: 0,
        status: 'in',
      },
      {
        value: '#29323c',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#83a4d4 0%,#b6fbff 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#83a4d4',
        stop: 0,
        status: 'in',
      },
      {
        value: '#b6fbff',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#FDFC47 0%,#24FE41 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#FDFC47',
        stop: 0,
        status: 'in',
      },
      {
        value: '#24FE41',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#abbaab 0%,#ffffff 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#abbaab',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ffffff',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#73C8A9 0%,#373B44 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#73C8A9',
        stop: 0,
        status: 'in',
      },
      {
        value: '#373B44',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#D38312 0%,#A83279 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#D38312',
        stop: 0,
        status: 'in',
      },
      {
        value: '#A83279',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#1e130c 0%,#9a8478 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#1e130c',
        stop: 0,
        status: 'in',
      },
      {
        value: '#9a8478',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#948E99 0%,#2E1437 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#948E99',
        stop: 0,
        status: 'in',
      },
      {
        value: '#2E1437',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#360033 0%,#0b8793 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#360033',
        stop: 0,
        status: 'in',
      },
      {
        value: '#0b8793',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#FFA17F 0%,#00223E 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#FFA17F',
        stop: 0,
        status: 'in',
      },
      {
        value: '#00223E',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#43cea2 0%,#185a9d 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#43cea2',
        stop: 0,
        status: 'in',
      },
      {
        value: '#185a9d',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#ffb347 0%,#ffcc33 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#ffb347',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ffcc33',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#6441A5 0%,#2a0845 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#6441A5',
        stop: 0,
        status: 'in',
      },
      {
        value: '#2a0845',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#FEAC5E 0%,#C779D0 50%,#4BC0C8 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#FEAC5E',
        stop: 0,
        status: 'in',
      },
      {
        value: '#C779D0',
        stop: '50',
        status: 'in',
      },
      {
        value: '#4BC0C8',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#833ab4 0%,#fd1d1d 50%,#fcb045 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#833ab4',
        stop: 0,
        status: 'in',
      },
      {
        value: '#fd1d1d',
        stop: '50',
        status: 'in',
      },
      {
        value: '#fcb045',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#ff0084 0%,#33001b 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#ff0084',
        stop: 0,
        status: 'in',
      },
      {
        value: '#33001b',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#00bf8f 0%,#001510 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#00bf8f',
        stop: 0,
        status: 'in',
      },
      {
        value: '#001510',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#136a8a 0%,#267871 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#136a8a',
        stop: 0,
        status: 'in',
      },
      {
        value: '#267871',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#8e9eab 0%,#eef2f3 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#8e9eab',
        stop: 0,
        status: 'in',
      },
      {
        value: '#eef2f3',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#7b4397 0%,#dc2430 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#7b4397',
        stop: 0,
        status: 'in',
      },
      {
        value: '#dc2430',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#D1913C 0%,#FFD194 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#D1913C',
        stop: 0,
        status: 'in',
      },
      {
        value: '#FFD194',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#F1F2B5 0%,#135058 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#F1F2B5',
        stop: 0,
        status: 'in',
      },
      {
        value: '#135058',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#6A9113 0%,#141517 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#6A9113',
        stop: 0,
        status: 'in',
      },
      {
        value: '#141517',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#004FF9 0%,#FFF94C 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#004FF9',
        stop: 0,
        status: 'in',
      },
      {
        value: '#FFF94C',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#525252 0%,#3d72b4 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#525252',
        stop: 0,
        status: 'in',
      },
      {
        value: '#3d72b4',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#BA8B02 0%,#181818 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#BA8B02',
        stop: 0,
        status: 'in',
      },
      {
        value: '#181818',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#ee9ca7 0%,#ffdde1 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#ee9ca7',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ffdde1',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#304352 0%,#d7d2cc 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#304352',
        stop: 0,
        status: 'in',
      },
      {
        value: '#d7d2cc',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#CCCCB2 0%,#757519 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#CCCCB2',
        stop: 0,
        status: 'in',
      },
      {
        value: '#757519',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#2c3e50 0%,#3498db 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#2c3e50',
        stop: 0,
        status: 'in',
      },
      {
        value: '#3498db',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#fc00ff 0%,#00dbde 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#fc00ff',
        stop: 0,
        status: 'in',
      },
      {
        value: '#00dbde',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#e53935 0%,#e35d5b 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#e53935',
        stop: 0,
        status: 'in',
      },
      {
        value: '#e35d5b',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#005C97 0%,#363795 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#005C97',
        stop: 0,
        status: 'in',
      },
      {
        value: '#363795',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#f46b45 0%,#eea849 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#f46b45',
        stop: 0,
        status: 'in',
      },
      {
        value: '#eea849',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#00C9FF 0%,#92FE9D 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#00C9FF',
        stop: 0,
        status: 'in',
      },
      {
        value: '#92FE9D',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#673AB7 0%,#512DA8 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#673AB7',
        stop: 0,
        status: 'in',
      },
      {
        value: '#512DA8',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#76b852 0%,#8DC26F 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#76b852',
        stop: 0,
        status: 'in',
      },
      {
        value: '#8DC26F',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#8E0E00 0%,#1F1C18 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#8E0E00',
        stop: 0,
        status: 'in',
      },
      {
        value: '#1F1C18',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#FFB75E 0%,#ED8F03 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#FFB75E',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ED8F03',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#c2e59c 0%,#64b3f4 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#c2e59c',
        stop: 0,
        status: 'in',
      },
      {
        value: '#64b3f4',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#403A3E 0%,#BE5869 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#403A3E',
        stop: 0,
        status: 'in',
      },
      {
        value: '#BE5869',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#C02425 0%,#F0CB35 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#C02425',
        stop: 0,
        status: 'in',
      },
      {
        value: '#F0CB35',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#B24592 0%,#F15F79 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#B24592',
        stop: 0,
        status: 'in',
      },
      {
        value: '#F15F79',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#457fca 0%,#5691c8 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#457fca',
        stop: 0,
        status: 'in',
      },
      {
        value: '#5691c8',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#6a3093 0%,#a044ff 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#6a3093',
        stop: 0,
        status: 'in',
      },
      {
        value: '#a044ff',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#eacda3 0%,#d6ae7b 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#eacda3',
        stop: 0,
        status: 'in',
      },
      {
        value: '#d6ae7b',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#fd746c 0%,#ff9068 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#fd746c',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ff9068',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#114357 0%,#F29492 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#114357',
        stop: 0,
        status: 'in',
      },
      {
        value: '#F29492',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#1e3c72 0%,#2a5298 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#1e3c72',
        stop: 0,
        status: 'in',
      },
      {
        value: '#2a5298',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#2F7336 0%,#AA3A38 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#2F7336',
        stop: 0,
        status: 'in',
      },
      {
        value: '#AA3A38',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#5614B0 0%,#DBD65C 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#5614B0',
        stop: 0,
        status: 'in',
      },
      {
        value: '#DBD65C',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#4DA0B0 0%,#D39D38 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#4DA0B0',
        stop: 0,
        status: 'in',
      },
      {
        value: '#D39D38',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#5A3F37 0%,#2C7744 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#5A3F37',
        stop: 0,
        status: 'in',
      },
      {
        value: '#2C7744',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#2980b9 0%,#2c3e50 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#2980b9',
        stop: 0,
        status: 'in',
      },
      {
        value: '#2c3e50',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#0099F7 0%,#F11712 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#0099F7',
        stop: 0,
        status: 'in',
      },
      {
        value: '#F11712',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#834d9b 0%,#d04ed6 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#834d9b',
        stop: 0,
        status: 'in',
      },
      {
        value: '#d04ed6',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#4B79A1 0%,#283E51 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#4B79A1',
        stop: 0,
        status: 'in',
      },
      {
        value: '#283E51',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#000000 0%,#434343 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#000000',
        stop: 0,
        status: 'in',
      },
      {
        value: '#434343',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#4CA1AF 0%,#C4E0E5 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#4CA1AF',
        stop: 0,
        status: 'in',
      },
      {
        value: '#C4E0E5',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#E0EAFC 0%,#CFDEF3 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#E0EAFC',
        stop: 0,
        status: 'in',
      },
      {
        value: '#CFDEF3',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#BA5370 0%,#F4E2D8 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#BA5370',
        stop: 0,
        status: 'in',
      },
      {
        value: '#F4E2D8',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#ff4b1f 0%,#1fddff 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#ff4b1f',
        stop: 0,
        status: 'in',
      },
      {
        value: '#1fddff',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#f7ff00 0%,#db36a4 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#f7ff00',
        stop: 0,
        status: 'in',
      },
      {
        value: '#db36a4',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#a80077 0%,#66ff00 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#a80077',
        stop: 0,
        status: 'in',
      },
      {
        value: '#66ff00',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#1D4350 0%,#A43931 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#1D4350',
        stop: 0,
        status: 'in',
      },
      {
        value: '#A43931',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#EECDA3 0%,#EF629F 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#EECDA3',
        stop: 0,
        status: 'in',
      },
      {
        value: '#EF629F',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#16BFFD 0%,#CB3066 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#16BFFD',
        stop: 0,
        status: 'in',
      },
      {
        value: '#CB3066',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#ff4b1f 0%,#ff9068 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#ff4b1f',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ff9068',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#FF5F6D 0%,#FFC371 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#FF5F6D',
        stop: 0,
        status: 'in',
      },
      {
        value: '#FFC371',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#2196f3 0%,#f44336 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#2196f3',
        stop: 0,
        status: 'in',
      },
      {
        value: '#f44336',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#00d2ff 0%,#928DAB 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#00d2ff',
        stop: 0,
        status: 'in',
      },
      {
        value: '#928DAB',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#3a7bd5 0%,#3a6073 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#3a7bd5',
        stop: 0,
        status: 'in',
      },
      {
        value: '#3a6073',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#0B486B 0%,#F56217 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#0B486B',
        stop: 0,
        status: 'in',
      },
      {
        value: '#F56217',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#e96443 0%,#904e95 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#e96443',
        stop: 0,
        status: 'in',
      },
      {
        value: '#904e95',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#2C3E50 0%,#4CA1AF 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#2C3E50',
        stop: 0,
        status: 'in',
      },
      {
        value: '#4CA1AF',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#2C3E50 0%,#FD746C 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#2C3E50',
        stop: 0,
        status: 'in',
      },
      {
        value: '#FD746C',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#F00000 0%,#DC281E 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#F00000',
        stop: 0,
        status: 'in',
      },
      {
        value: '#DC281E',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#141E30 0%,#243B55 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#141E30',
        stop: 0,
        status: 'in',
      },
      {
        value: '#243B55',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#42275a 0%,#734b6d 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#42275a',
        stop: 0,
        status: 'in',
      },
      {
        value: '#734b6d',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#000428 0%,#004e92 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#000428',
        stop: 0,
        status: 'in',
      },
      {
        value: '#004e92',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#56ab2f 0%,#a8e063 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#56ab2f',
        stop: 0,
        status: 'in',
      },
      {
        value: '#a8e063',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#cb2d3e 0%,#ef473a 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#cb2d3e',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ef473a',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#f79d00 0%,#64f38c 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#f79d00',
        stop: 0,
        status: 'in',
      },
      {
        value: '#64f38c',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#f85032 0%,#e73827 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#f85032',
        stop: 0,
        status: 'in',
      },
      {
        value: '#e73827',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#fceabb 0%,#f8b500 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#fceabb',
        stop: 0,
        status: 'in',
      },
      {
        value: '#f8b500',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#808080 0%,#3fada8 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#808080',
        stop: 0,
        status: 'in',
      },
      {
        value: '#3fada8',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#ffd89b 0%,#19547b 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#ffd89b',
        stop: 0,
        status: 'in',
      },
      {
        value: '#19547b',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#bdc3c7 0%,#2c3e50 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#bdc3c7',
        stop: 0,
        status: 'in',
      },
      {
        value: '#2c3e50',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#BE93C5 0%,#7BC6CC 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#BE93C5',
        stop: 0,
        status: 'in',
      },
      {
        value: '#7BC6CC',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#A1FFCE 0%,#FAFFD1 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#A1FFCE',
        stop: 0,
        status: 'in',
      },
      {
        value: '#FAFFD1',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#4ECDC4 0%,#556270 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#4ECDC4',
        stop: 0,
        status: 'in',
      },
      {
        value: '#556270',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#3a6186 0%,#89253e 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#3a6186',
        stop: 0,
        status: 'in',
      },
      {
        value: '#89253e',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#ef32d9 0%,#89fffd 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#ef32d9',
        stop: 0,
        status: 'in',
      },
      {
        value: '#89fffd',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#de6161 0%,#2657eb 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#de6161',
        stop: 0,
        status: 'in',
      },
      {
        value: '#2657eb',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#ff00cc 0%,#333399 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#ff00cc',
        stop: 0,
        status: 'in',
      },
      {
        value: '#333399',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#fffc00 0%,#ffffff 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#fffc00',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ffffff',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#ff7e5f 0%,#feb47b 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#ff7e5f',
        stop: 0,
        status: 'in',
      },
      {
        value: '#feb47b',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#00c3ff 0%,#ffff1c 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#00c3ff',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ffff1c',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#f4c4f3 0%,#fc67fa 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#f4c4f3',
        stop: 0,
        status: 'in',
      },
      {
        value: '#fc67fa',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#41295a 0%,#2F0743 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#41295a',
        stop: 0,
        status: 'in',
      },
      {
        value: '#2F0743',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#A770EF 0%,#CF8BF3 50%,#FDB99B 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#A770EF',
        stop: 0,
        status: 'in',
      },
      {
        value: '#CF8BF3',
        stop: '50',
        status: 'in',
      },
      {
        value: '#FDB99B',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#ee0979 0%,#ff6a00 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#ee0979',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ff6a00',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#F3904F 0%,#3B4371 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#F3904F',
        stop: 0,
        status: 'in',
      },
      {
        value: '#3B4371',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#67B26F 0%,#4ca2cd 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#67B26F',
        stop: 0,
        status: 'in',
      },
      {
        value: '#4ca2cd',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#3494E6 0%,#EC6EAD 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#3494E6',
        stop: 0,
        status: 'in',
      },
      {
        value: '#EC6EAD',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#DBE6F6 0%,#C5796D 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#DBE6F6',
        stop: 0,
        status: 'in',
      },
      {
        value: '#C5796D',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#9CECFB 0%,#65C7F7 50%,#0052D4 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#9CECFB',
        stop: 0,
        status: 'in',
      },
      {
        value: '#65C7F7',
        stop: '50',
        status: 'in',
      },
      {
        value: '#0052D4',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#c0c0aa 0%,#1cefff 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#c0c0aa',
        stop: 0,
        status: 'in',
      },
      {
        value: '#1cefff',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#DCE35B 0%,#45B649 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#DCE35B',
        stop: 0,
        status: 'in',
      },
      {
        value: '#45B649',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#E8CBC0 0%,#636FA4 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#E8CBC0',
        stop: 0,
        status: 'in',
      },
      {
        value: '#636FA4',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#F0F2F0 0%,#000C40 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#F0F2F0',
        stop: 0,
        status: 'in',
      },
      {
        value: '#000C40',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#FFAFBD 0%,#ffc3a0 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#FFAFBD',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ffc3a0',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#43C6AC 0%,#F8FFAE 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#43C6AC',
        stop: 0,
        status: 'in',
      },
      {
        value: '#F8FFAE',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#093028 0%,#237A57 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#093028',
        stop: 0,
        status: 'in',
      },
      {
        value: '#237A57',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#43C6AC 0%,#191654 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#43C6AC',
        stop: 0,
        status: 'in',
      },
      {
        value: '#191654',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#4568DC 0%,#B06AB3 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#4568DC',
        stop: 0,
        status: 'in',
      },
      {
        value: '#B06AB3',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#0575E6 0%,#021B79 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#0575E6',
        stop: 0,
        status: 'in',
      },
      {
        value: '#021B79',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#200122 0%,#6f0000 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#200122',
        stop: 0,
        status: 'in',
      },
      {
        value: '#6f0000',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#44A08D 0%,#093637 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#44A08D',
        stop: 0,
        status: 'in',
      },
      {
        value: '#093637',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#6190E8 0%,#A7BFE8 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#6190E8',
        stop: 0,
        status: 'in',
      },
      {
        value: '#A7BFE8',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#34e89e 0%,#0f3443 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#34e89e',
        stop: 0,
        status: 'in',
      },
      {
        value: '#0f3443',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#F7971E 0%,#FFD200 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#F7971E',
        stop: 0,
        status: 'in',
      },
      {
        value: '#FFD200',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#C33764 0%,#1D2671 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#C33764',
        stop: 0,
        status: 'in',
      },
      {
        value: '#1D2671',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#20002c 0%,#cbb4d4 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#20002c',
        stop: 0,
        status: 'in',
      },
      {
        value: '#cbb4d4',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#D66D75 0%,#E29587 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#D66D75',
        stop: 0,
        status: 'in',
      },
      {
        value: '#E29587',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#30E8BF 0%,#FF8235 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#30E8BF',
        stop: 0,
        status: 'in',
      },
      {
        value: '#FF8235',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#B2FEFA 0%,#0ED2F7 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#B2FEFA',
        stop: 0,
        status: 'in',
      },
      {
        value: '#0ED2F7',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#4AC29A 0%,#BDFFF3 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#4AC29A',
        stop: 0,
        status: 'in',
      },
      {
        value: '#BDFFF3',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#E44D26 0%,#F16529 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#E44D26',
        stop: 0,
        status: 'in',
      },
      {
        value: '#F16529',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#EB5757 0%,#000000 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#EB5757',
        stop: 0,
        status: 'in',
      },
      {
        value: '#000000',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#F2994A 0%,#F2C94C 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#F2994A',
        stop: 0,
        status: 'in',
      },
      {
        value: '#F2C94C',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#56CCF2 0%,#2F80ED 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#56CCF2',
        stop: 0,
        status: 'in',
      },
      {
        value: '#2F80ED',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#007991 0%,#78ffd6 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#007991',
        stop: 0,
        status: 'in',
      },
      {
        value: '#78ffd6',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#000046 0%,#1CB5E0 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#000046',
        stop: 0,
        status: 'in',
      },
      {
        value: '#1CB5E0',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#159957 0%,#155799 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#159957',
        stop: 0,
        status: 'in',
      },
      {
        value: '#155799',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#c0392b 0%,#8e44ad 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#c0392b',
        stop: 0,
        status: 'in',
      },
      {
        value: '#8e44ad',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#EF3B36 0%,#FFFFFF 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#EF3B36',
        stop: 0,
        status: 'in',
      },
      {
        value: '#FFFFFF',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#283c86 0%,#45a247 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#283c86',
        stop: 0,
        status: 'in',
      },
      {
        value: '#45a247',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#3A1C71 0%,#D76D77 50%,#FFAF7B 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#3A1C71',
        stop: 0,
        status: 'in',
      },
      {
        value: '#D76D77',
        stop: '50',
        status: 'in',
      },
      {
        value: '#FFAF7B',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#CB356B 0%,#BD3F32 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#CB356B',
        stop: 0,
        status: 'in',
      },
      {
        value: '#BD3F32',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#36D1DC 0%,#5B86E5 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#36D1DC',
        stop: 0,
        status: 'in',
      },
      {
        value: '#5B86E5',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#000000 0%,#0f9b0f 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#000000',
        stop: 0,
        status: 'in',
      },
      {
        value: '#0f9b0f',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#1c92d2 0%,#f2fcfe 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#1c92d2',
        stop: 0,
        status: 'in',
      },
      {
        value: '#f2fcfe',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#642B73 0%,#C6426E 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#642B73',
        stop: 0,
        status: 'in',
      },
      {
        value: '#C6426E',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#06beb6 0%,#48b1bf 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#06beb6',
        stop: 0,
        status: 'in',
      },
      {
        value: '#48b1bf',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#0cebeb 0%,#20e3b2 50%,#29ffc6 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#0cebeb',
        stop: 0,
        status: 'in',
      },
      {
        value: '#20e3b2',
        stop: '50',
        status: 'in',
      },
      {
        value: '#29ffc6',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#d9a7c7 0%,#fffcdc 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#d9a7c7',
        stop: 0,
        status: 'in',
      },
      {
        value: '#fffcdc',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#396afc 0%,#2948ff 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#396afc',
        stop: 0,
        status: 'in',
      },
      {
        value: '#2948ff',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#C9D6FF 0%,#E2E2E2 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#C9D6FF',
        stop: 0,
        status: 'in',
      },
      {
        value: '#E2E2E2',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#7F00FF 0%,#E100FF 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#7F00FF',
        stop: 0,
        status: 'in',
      },
      {
        value: '#E100FF',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#ff9966 0%,#ff5e62 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#ff9966',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ff5e62',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#22c1c3 0%,#fdbb2d 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#22c1c3',
        stop: 0,
        status: 'in',
      },
      {
        value: '#fdbb2d',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#1a2a6c 0%,#b21f1f 50%,#fdbb2d 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#1a2a6c',
        stop: 0,
        status: 'in',
      },
      {
        value: '#b21f1f',
        stop: '50',
        status: 'in',
      },
      {
        value: '#fdbb2d',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#e1eec3 0%,#f05053 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#e1eec3',
        stop: 0,
        status: 'in',
      },
      {
        value: '#f05053',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#ADA996 0%,#F2F2F2 100%,#DBDBDB 100%,#EAEAEA 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#ADA996',
        stop: 0,
        status: 'in',
      },
      {
        value: '#F2F2F2',
        stop: '100',
        status: 'in',
      },
      {
        value: '#DBDBDB',
        stop: '100',
        status: 'in',
      },
      {
        value: '#EAEAEA',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#667db6 0%,#0082c8 100%,#0082c8 100%,#667db6 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#667db6',
        stop: 0,
        status: 'in',
      },
      {
        value: '#0082c8',
        stop: '100',
        status: 'in',
      },
      {
        value: '#0082c8',
        stop: '100',
        status: 'in',
      },
      {
        value: '#667db6',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#03001e 0%,#7303c0 100%,#ec38bc 100%,#fdeff9 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#03001e',
        stop: 0,
        status: 'in',
      },
      {
        value: '#7303c0',
        stop: '100',
        status: 'in',
      },
      {
        value: '#ec38bc',
        stop: '100',
        status: 'in',
      },
      {
        value: '#fdeff9',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#6D6027 0%,#D3CBB8 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#6D6027',
        stop: 0,
        status: 'in',
      },
      {
        value: '#D3CBB8',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#74ebd5 0%,#ACB6E5 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#74ebd5',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ACB6E5',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#fc4a1a 0%,#f7b733 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#fc4a1a',
        stop: 0,
        status: 'in',
      },
      {
        value: '#f7b733',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#00F260 0%,#0575E6 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#00F260',
        stop: 0,
        status: 'in',
      },
      {
        value: '#0575E6',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#800080 0%,#ffc0cb 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#800080',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ffc0cb',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#CAC531 0%,#F3F9A7 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#CAC531',
        stop: 0,
        status: 'in',
      },
      {
        value: '#F3F9A7',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#3C3B3F 0%,#605C3C 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#3C3B3F',
        stop: 0,
        status: 'in',
      },
      {
        value: '#605C3C',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#D3CCE3 0%,#E9E4F0 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#D3CCE3',
        stop: 0,
        status: 'in',
      },
      {
        value: '#E9E4F0',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#00b09b 0%,#96c93d 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#00b09b',
        stop: 0,
        status: 'in',
      },
      {
        value: '#96c93d',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#0f0c29 0%,#302b63 50%,#24243e 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#0f0c29',
        stop: 0,
        status: 'in',
      },
      {
        value: '#302b63',
        stop: '50',
        status: 'in',
      },
      {
        value: '#24243e',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#fffbd5 0%,#b20a2c 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#fffbd5',
        stop: 0,
        status: 'in',
      },
      {
        value: '#b20a2c',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#23074d 0%,#cc5333 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#23074d',
        stop: 0,
        status: 'in',
      },
      {
        value: '#cc5333',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#c94b4b 0%,#4b134f 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#c94b4b',
        stop: 0,
        status: 'in',
      },
      {
        value: '#4b134f',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#FC466B 0%,#3F5EFB 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#FC466B',
        stop: 0,
        status: 'in',
      },
      {
        value: '#3F5EFB',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#FC5C7D 0%,#6A82FB 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#FC5C7D',
        stop: 0,
        status: 'in',
      },
      {
        value: '#6A82FB',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#108dc7 0%,#ef8e38 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#108dc7',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ef8e38',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#11998e 0%,#38ef7d 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#11998e',
        stop: 0,
        status: 'in',
      },
      {
        value: '#38ef7d',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#3E5151 0%,#DECBA4 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#3E5151',
        stop: 0,
        status: 'in',
      },
      {
        value: '#DECBA4',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#40E0D0 0%,#FF8C00 50%,#FF0080 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#40E0D0',
        stop: 0,
        status: 'in',
      },
      {
        value: '#FF8C00',
        stop: '50',
        status: 'in',
      },
      {
        value: '#FF0080',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#bc4e9c 0%,#f80759 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#bc4e9c',
        stop: 0,
        status: 'in',
      },
      {
        value: '#f80759',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#355C7D 0%,#6C5B7B 50%,#C06C84 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#355C7D',
        stop: 0,
        status: 'in',
      },
      {
        value: '#6C5B7B',
        stop: '50',
        status: 'in',
      },
      {
        value: '#C06C84',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#4e54c8 0%,#8f94fb 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#4e54c8',
        stop: 0,
        status: 'in',
      },
      {
        value: '#8f94fb',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#333333 0%,#dd1818 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#333333',
        stop: 0,
        status: 'in',
      },
      {
        value: '#dd1818',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#a8c0ff 0%,#3f2b96 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#a8c0ff',
        stop: 0,
        status: 'in',
      },
      {
        value: '#3f2b96',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#ad5389 0%,#3c1053 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#ad5389',
        stop: 0,
        status: 'in',
      },
      {
        value: '#3c1053',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#636363 0%,#a2ab58 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#636363',
        stop: 0,
        status: 'in',
      },
      {
        value: '#a2ab58',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#DA4453 0%,#89216B 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#DA4453',
        stop: 0,
        status: 'in',
      },
      {
        value: '#89216B',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#005AA7 0%,#FFFDE4 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#005AA7',
        stop: 0,
        status: 'in',
      },
      {
        value: '#FFFDE4',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#59C173 0%,#a17fe0 50%,#5D26C1 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#59C173',
        stop: 0,
        status: 'in',
      },
      {
        value: '#a17fe0',
        stop: '50',
        status: 'in',
      },
      {
        value: '#5D26C1',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#FFEFBA 0%,#FFFFFF 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#FFEFBA',
        stop: 0,
        status: 'in',
      },
      {
        value: '#FFFFFF',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#00B4DB 0%,#0083B0 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#00B4DB',
        stop: 0,
        status: 'in',
      },
      {
        value: '#0083B0',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#FDC830 0%,#F37335 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#FDC830',
        stop: 0,
        status: 'in',
      },
      {
        value: '#F37335',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#ED213A 0%,#93291E 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#ED213A',
        stop: 0,
        status: 'in',
      },
      {
        value: '#93291E',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#1E9600 0%,#FFF200 50%,#FF0000 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#1E9600',
        stop: 0,
        status: 'in',
      },
      {
        value: '#FFF200',
        stop: '50',
        status: 'in',
      },
      {
        value: '#FF0000',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#a8ff78 0%,#78ffd6 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#a8ff78',
        stop: 0,
        status: 'in',
      },
      {
        value: '#78ffd6',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#8A2387 0%,#E94057 50%,#F27121 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#8A2387',
        stop: 0,
        status: 'in',
      },
      {
        value: '#E94057',
        stop: '50',
        status: 'in',
      },
      {
        value: '#F27121',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#FF416C 0%,#FF4B2B 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#FF416C',
        stop: 0,
        status: 'in',
      },
      {
        value: '#FF4B2B',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#654ea3 0%,#eaafc8 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#654ea3',
        stop: 0,
        status: 'in',
      },
      {
        value: '#eaafc8',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#009FFF 0%,#ec2F4B 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#009FFF',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ec2F4B',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#544a7d 0%,#ffd452 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#544a7d',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ffd452',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#8360c3 0%,#2ebf91 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#8360c3',
        stop: 0,
        status: 'in',
      },
      {
        value: '#2ebf91',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#dd3e54 0%,#6be585 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#dd3e54',
        stop: 0,
        status: 'in',
      },
      {
        value: '#6be585',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#659999 0%,#f4791f 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#659999',
        stop: 0,
        status: 'in',
      },
      {
        value: '#f4791f',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#f12711 0%,#f5af19 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#f12711',
        stop: 0,
        status: 'in',
      },
      {
        value: '#f5af19',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#c31432 0%,#240b36 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#c31432',
        stop: 0,
        status: 'in',
      },
      {
        value: '#240b36',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#7F7FD5 0%,#86A8E7 50%,#91EAE4 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#7F7FD5',
        stop: 0,
        status: 'in',
      },
      {
        value: '#86A8E7',
        stop: '50',
        status: 'in',
      },
      {
        value: '#91EAE4',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#f953c6 0%,#b91d73 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#f953c6',
        stop: 0,
        status: 'in',
      },
      {
        value: '#b91d73',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#1f4037 0%,#99f2c8 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#1f4037',
        stop: 0,
        status: 'in',
      },
      {
        value: '#99f2c8',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#8E2DE2 0%,#4A00E0 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#8E2DE2',
        stop: 0,
        status: 'in',
      },
      {
        value: '#4A00E0',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#aa4b6b 0%,#6b6b83 50%,#3b8d99 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#aa4b6b',
        stop: 0,
        status: 'in',
      },
      {
        value: '#6b6b83',
        stop: '50',
        status: 'in',
      },
      {
        value: '#3b8d99',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(90deg,#FF0099 0%,#493240 100%)',
    },
    direction: 90,
    colors: [
      {
        value: '#FF0099',
        stop: 0,
        status: 'in',
      },
      {
        value: '#493240',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#2980B9 0%,#6DD5FA 50%,#FFFFFF 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#2980B9',
        stop: 0,
        status: 'in',
      },
      {
        value: '#6DD5FA',
        stop: '50',
        status: 'in',
      },
      {
        value: '#FFFFFF',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#373B44 0%,#4286f4 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#373B44',
        stop: 0,
        status: 'in',
      },
      {
        value: '#4286f4',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#b92b27 0%,#1565C0 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#b92b27',
        stop: 0,
        status: 'in',
      },
      {
        value: '#1565C0',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#12c2e9',
        stop: 0,
        status: 'in',
      },
      {
        value: '#c471ed',
        stop: '50',
        status: 'in',
      },
      {
        value: '#f64f59',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#0F2027 0%,#203A43 50%,#2C5364 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#0F2027',
        stop: 0,
        status: 'in',
      },
      {
        value: '#203A43',
        stop: '50',
        status: 'in',
      },
      {
        value: '#2C5364',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(0deg,#C6FFDD 0%,#FBD786 50%,#f7797d 100%)',
    },
    direction: 0,
    colors: [
      {
        value: '#C6FFDD',
        stop: 0,
        status: 'in',
      },
      {
        value: '#FBD786',
        stop: '50',
        status: 'in',
      },
      {
        value: '#f7797d',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#2193b0 0%,#6dd5ed 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#2193b0',
        stop: 0,
        status: 'in',
      },
      {
        value: '#6dd5ed',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(180deg,#ee9ca7 0%,#ffdde1 100%)',
    },
    direction: 180,
    colors: [
      {
        value: '#ee9ca7',
        stop: 0,
        status: 'in',
      },
      {
        value: '#ffdde1',
        stop: '100',
        status: 'in',
      },
    ],
  },
  {
    type: 'linear',
    style: {
      'background-image': 'linear-gradient(270deg,#bdc3c7 0%,#2c3e50 100%)',
    },
    direction: 270,
    colors: [
      {
        value: '#bdc3c7',
        stop: 0,
        status: 'in',
      },
      {
        value: '#2c3e50',
        stop: '100',
        status: 'in',
      },
    ],
  },
];
var presets = webgradients.concat(uigradients);

var inputHandle = {
  methods: {
    getEventData: function (event) {
      var min = parseInt(event.currentTarget.min);
      var max = parseInt(event.currentTarget.max);
      var currentValue = parseInt(event.currentTarget.value);

      return {
        min: min,
        max: max,
        value: currentValue,
      };
    },
    increaseValue: function (event) {
      var data = this.getEventData(event);
      var currentValue = data.value;

      if (currentValue < data.max) this.setValue(currentValue + 1);
      else if (currentValue == data.max) this.setValue(data.min);
    },

    decreaseValue: function (event) {
      var data = this.getEventData(event);
      var currentValue = data.value;

      if (currentValue > data.min) this.setValue(currentValue - 1);
      else if (currentValue == data.min) this.setValue(data.max);
    },
    parseDigits: function (event) {
      // Make sure number does not exceed max or go below min
      var data = this.getEventData(event);

      // First remove all non-digits chars
      data.value = parseInt(data.value.toString());
      //.replace(/\D/g,'')

      // Check number bounderis
      if (data.value > data.max) data.value = data.max;

      if (data.value < data.min) data.value = data.min;

      this.setValue(data.value);
    },
  },
};
//extending circle slider
var slider = {
  extends: VueCircleSlider.CircleSlider,
  methods: {
    animateSlider(startAngle, endAngle) {
      this.updateAngle(endAngle);
    },
  },
};

Vue.component('circular-control', {
  mixins: [inputHandle],
  template: '#circular-control',
  data() {
    return {
      circle_clicked: false,
      circle: null,
      rotate: 0,
    };
  },
  props: ['direction'],
  created: function () {
    // attach events to move picker inside color wheel
    document.addEventListener('mousedown', e => {
      if (e.target.classList.contains('circle-range-knob')) this.circle_clicked = true;
    });

    document.addEventListener('mouseup', e => (this.circle_clicked = false));
    document.addEventListener('mousemove', this.moveCircle);

    window.addEventListener('resize', this.updateCirclePosition);
  },
  mounted: function () {
    this.updateCirclePosition();

    this.rotate = this.direction.amount;
    this.$root.$on('completed-transition', this.updateCirclePosition);
  },
  methods: {
    setValue: function (value) {
      this.direction.amount = value;
    },
    updateCirclePosition: function () {
      this.circle = this.$el.querySelector('.circle-range').getBoundingClientRect();
      this.circle.radius = this.circle.height / 2;
    },
    handleCircleValue: function (e) {
      var max = 360;
      var current = this.direction.amount;

      // Scrolling up
      if (e.deltaY < 0) {
        if (current < max) this.direction.amount = current + 1;
        else this.direction.amount = 0;
      }
      // Scrolling down
      if (e.deltaY > 0) {
        if (current > 0) this.direction.amount = current - 1;
        else this.direction.amount = 360;
      }

      this.rotate = this.direction.amount;
    },
    moveCircle: function (e) {
      if (!this.circle_clicked) return;

      let left = e.clientX - this.circle.x;
      let top = e.clientY - this.circle.y;

      const dx = this.circle.radius - left;
      const dy = this.circle.radius - top;

      // get angle
      let angle = Math.atan2(dy, dx);

      // -90 to start from from top center
      let degrees = (angle * 180) / Math.PI - 90;

      // the first quarter will be over positive and the rest of the circle will negative degrees.
      // Adjust for that case
      if (degrees < 0) degrees = 360 - Math.abs(degrees);

      this.direction.amount = parseInt(degrees);
    },
  },
  computed: {
    getRotation: function () {
      return {
        transform: `rotate(${this.rotate}deg)`,
      };
    },
  },
  watch: {
    'direction.amount': function (degrees) {
      this.rotate = degrees;
    },
  },
});
Vue.component('css-text', {
  template: '#css-text',
  props: ['show', 'css'],
});

Vue.component('range', {
  template: '#range',
  props: ['rangedata'],

  methods: {
    handleScroll: function (e) {
      var max = this.rangedata.max;
      var current = parseFloat(this.rangedata.amount);
      var step = parseFloat(this.rangedata.step);
      // Scrolling up
      if (e.deltaY < 0) {
        if (current < max) this.rangedata.amount = current + step;

        this.$emit('update');
      }
      // Scrolling down
      if (e.deltaY > 0) {
        if (current > 0) this.rangedata.amount = current - step;
        this.$emit('update');
      }
    },
  },
});

Vue.component('info-box', {
  template: '#info-box-template',
  computed: {
    showInfo: function () {
      return this.$parent.showInfo;
    },
  },
  methods: {
    hideInfo: function () {
      this.$parent.showInfo = false;
    },
  },
});

Vue.component('user-presets', {
  template: '#user-presets',
  data() {
    return {
      userPresets: [],
      selectedPreset: -1,
    };
  },
  computed: {
    enableClass: function () {
      var apply = true;
      var selected = this.userPresets[this.selectedPreset];
      if (typeof selected == 'undefined') apply = false;
      else apply = selected.style == '' ? false : true;

      return {
        'enable-save': this.selectedPreset != -1,
        'enable-apply': apply,
      };
    },
  },
  methods: {
    savePreset: function () {
      if (typeof this.userPresets[this.selectedPreset] == 'undefined') return;

      var parent = this.$parent;
      var gradients = this.$parent.gradients;
      var style = this.$parent.style;

      var gradientString = this.$parent.cloneObj(gradients);
      var styleString = this.$parent.cloneObj(style);
      var save = {
        gradient: gradientString,
        style: styleString,
      };

      this.userPresets[this.selectedPreset].style = styleString;
      localStorage.setItem('gradient-preset-' + this.selectedPreset, JSON.stringify(save));
    },
    applyPreset: function () {
      var selected = this.userPresets[this.selectedPreset];

      // Check if the preset has any data saved
      if (
        typeof selected == 'undefined' ||
        !this.userPresets[this.selectedPreset].hasOwnProperty('style') ||
        this.userPresets[this.selectedPreset].style == ''
      )
        return;

      // Apply the preset
      var gradientStack = localStorage.getItem('gradient-preset-' + this.selectedPreset);
      var parse = JSON.parse(gradientStack);
      this.$parent.gradients = parse.gradient;

      // Set gradient so colors can be displayed
      this.$parent.setGradient(0);
    },
    deselectPreset: function () {
      this.selectedPreset = -1;
    },
  },
  mounted() {
    for (i = 0; i <= 2; i++) {
      var gradientLocal = localStorage.getItem('gradient-preset-' + i);

      if (gradientLocal == null) {
        gradientLocal = {
          style: '',
          preset: {},
        };
        localStorage.setItem('gradient-preset-' + i, JSON.stringify(gradientLocal));
      } else {
        gradientLocal = JSON.parse(gradientLocal);
      }

      this.userPresets.push(gradientLocal);
    }
  },
  directives: {
    //https://jsfiddle.net/Linusborg/Lx49LaL8/
    'click-outside': {
      bind: function (el, binding, vNode) {
        // Provided expression must evaluate to a function.
        if (typeof binding.value !== 'function') {
          const compName = vNode.context.name;
          let warn = `[Vue-click-outside:] provided expression '${binding.expression}' is not a function, but has to be`;
          if (compName) {
            warn += `Found in component '${compName}'`;
          }

          console.warn(warn);
        }
        // Define Handler and cache it on the element
        const bubble = binding.modifiers.bubble;
        const handler = e => {
          if (bubble || (!el.contains(e.target) && el !== e.target)) {
            binding.value(e);
          }
        };
        el.__vueClickOutside__ = handler;

        // add Event Listeners
        document.addEventListener('click', handler);
      },

      unbind: function (el, binding) {
        // Remove Event Listeners
        document.removeEventListener('click', el.__vueClickOutside__);
        el.__vueClickOutside__ = null;
      },
    },
  },
});

Vue.component('options-container', {
  template: '#options-container',
  props: ['options'],
  data() {
    return {
      typeIcons: [
        'data:image/svg+xml;base64,' +
          btoa(
            '<svg  xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"><rect x="20" y="15" width="60" height="70" fill="transparent" stroke-width="8" stroke="#fff"/><line x1="20" y1="50" x2="80" y2="50" stroke="#fff" stroke-width="8"/></svg>'
          ),
        'data:image/svg+xml;base64,' +
          btoa(
            '<svg  xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" stroke="#fff" stroke-width="8" fill="transparent"/> <circle cx="50" cy="50" r="25" stroke="#fff" stroke-width="6.5" fill="transparent" /></svg>'
          ),
      ],
      repeatIcon:
        'data:image/svg+xml;base64,' +
        btoa(
          '<svg  fill="#fff" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"><path d="M79.5,17.1c-2.2,0-4,1.8-4,4v8.5C69.2,22.3,59.9,17.9,50,17.9c-18.5,0-33.5,15-33.5,33.5s15,33.5,33.5,33.5  c12,0,23.2-6.5,29.1-17c1.1-1.9,0.4-4.4-1.5-5.5c-1.9-1.1-4.4-0.4-5.5,1.5c-4.5,8-13,12.9-22.2,12.9c-14.1,0-25.5-11.4-25.5-25.5  S35.9,25.9,50,25.9c7.6,0,14.7,3.4,19.5,9.1h-7.9c-2.2,0-4,1.8-4,4s1.8,4,4,4h17.9c2.2,0,4-1.8,4-4V21.1  C83.5,18.9,81.7,17.1,79.5,17.1z"></path></svg>'
        ),
      shapeIcons: [
        'data:image/svg+xml;base64,' +
          btoa(
            '<svg fill="#fff" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" stroke-width="0" fill="#fff" /></svg>'
          ),
        'data:image/svg+xml;base64,' +
          btoa(
            '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"><ellipse cx="50" cy="50" rx="40" ry="25" fill="#fff" /></svg>'
          ),
      ],
    };
  },
});

Vue.component('colors', {
  template: '#colors',
  props: ['color', 'length'],
});

Vue.component('color-stop', {
  mixins: [inputHandle],
  template: '#color-stop',
  props: ['color', 'index'],
  methods: {
    setValue: function (value) {
      this.color.stop = value;
    },

    dragStart(index) {
      this.dragging = true;
      this.index = index;
      this.color.status = 'dragged';

      // Set current color so user is able to change color through picker
      this.$root.setColor(index);
    },
    dragStop() {
      this.dragging = false;
      var status = this.color.status;
      // If element has been dragged out then delete it (we have already checked we have more than two colors in doDrag function)
      if (status == 'out') this.$parent.colors.splice(this.index, 1);
      else this.color.status = 'in';
    },
    doDrag(event) {
      if (this.dragging) {
        var element = this.$parent.$el;
        this.containerRect = element.getBoundingClientRect();

        // Get container coords
        var left = this.containerRect.left;
        var top = this.containerRect.top;

        // get container height and weight
        var height = this.containerRect.height;
        var width = this.containerRect.width;

        // Get mouse position
        var x = event.clientX;
        var y = event.clientY;

        // Get how much the point should be moved
        var moveX = x - left;
        var moveYTop = y - (top - height);
        var moveYBottom = y - (top + height * 2);

        // Get move in percentage
        var percentage = (moveX * 100) / width;

        if (percentage < 0) percentage = 0;

        if (percentage > 100) percentage = 100;

        percentage = Math.round(percentage);

        this.color.stop = percentage;
        // If stop was dragged outside (i.e mouse moved outside bar) then hide the stop. Also, it will be filtered out of the colors array
        // This will happen only if we have more then two elements
        if ((moveYTop <= 0 || moveYBottom >= 0) && this.$parent.colorsLength > 2) this.color.status = 'out';
        else this.color.status = 'dragged';
      }
    },
    handleResize: function () {
      var element = this.$parent.$el;
      this.containerRect = element.getBoundingClientRect();
    },
  },
  computed: {
    opaqueColor: function () {
      var color = this.color.value;
      if (color.toLowerCase().indexOf('rgba') != -1) {
        color = color.split(',');
        color[4] = 1;
      }
      return {
        'background-color': color,
      };
    },
  },
  mounted() {
    var element = this.$parent.$el;
    this.containerRect = element.getBoundingClientRect();
  },
  created: function () {
    window.addEventListener('resize', this.handleResize);
    window.addEventListener('mouseup', this.dragStop);
    window.addEventListener('mousemove', this.doDrag);
  },
});

Vue.component('color-slider', {
  template: '#color-slider',
  props: ['colors'],
  data() {
    return {
      dragging: false,
    };
  },
  computed: {
    colorsLength: function () {
      return this.colors.length;
    },
    displayBarGradient: function () {
      /* This function is used to provide the display bar the colors for the current selected gradient, This will always be linear so we need to perfom separate action to getStyle*/
      var colorsArray = [];
      var style = '';
      colorsArray.push('90deg');

      var colors = JSON.parse(JSON.stringify(this.colors));
      colors.sort((a, b) => a.stop - b.stop);

      colors.forEach(color => {
        if (color.status == 'out') return;

        colorsArray.push(color.value + ' ' + color.stop + '%');
        style = 'linear-gradient(' + colorsArray.join(', ') + ')';
      });
      return {
        'background-image': style,
      };
    },
  },
});

Vue.component('toggle-control', {
  template: '#toggle-control',
  props: {
    options: Object,
    icons: Array,
    booleanIcon: String,
    tip: {
      type: String,
      default: '',
    },
    'show-text': {
      type: Boolean,
      default: false,
    },
    'show-icon': {
      type: Boolean,
      default: true,
    },
    type: {
      type: String,
      default: 'array',
    },
  },

  methods: {
    toggleSelection: function (index) {
      var selections = this.options.selections;
      var selectionsLength = selections.length - 1;
      var nextIndex = index + 1 > selectionsLength ? 0 : index + 1;
      this.options.selected = selections[nextIndex];
    },
  },
});

var chrome = VueColor.Chrome;

new Vue({
  el: '#app',
  components: {
    'chrome-picker': chrome,
  },
  data() {
    return {
      showControls: true,
      showPresets: false,
      showInfo: false,
      randomColors: [
        '#1abc9c',
        '#16a085',
        '#2ecc71',
        '#27ae60',
        '#3498db',
        '#2980b9',
        '#34495e',
        '#2c3e50',
        '#ea4c88',
        '#ca2c68',
        '#9b59b6',
        '#8e44ad',
        '#f1c40f',
        '#f39c12',
        '#e74c3c',
        '#c0392b',
        '#ecf0f1',
        '#bdc3c7',
        '#7f8c8d',
      ],

      options: {
        type: {
          selections: ['linear', 'radial'],
          selected: 'linear',
        },
        repeating: {
          selections: [false, true],
          selected: false,
        },
        direction: {
          amount: 45,
        },
        shape: {
          selections: ['circle', 'ellipse'],
          selected: 'ellipse',
        },
        size: {
          ellipse: {
            height: {
              name: 'Height',
              amount: 100,
              unit: '%',
              min: 0,
              max: 100,
            },
            width: {
              name: 'width',
              amount: 100,
              unit: '%',
              min: 0,
              max: 100,
            },
          },
          circle: {
            length: {
              name: 'Length',
              amount: 500,
              unit: 'px',
              min: 0,
              max: 1000,
            },
          },
        },
        position: {
          vertical: {
            name: 'y-offset',
            amount: 50,
            unit: '%',
            min: 0,
            max: 100,
          },
          horizontal: {
            name: 'x-offset',
            amount: 50,
            unit: '%',
            min: 0,
            max: 100,
          },
        },
        colors: [
          {
            value: '#6a85b6',
            stop: 0,
            status: 'in',
          },
          {
            value: '#bac8e0',
            stop: 100,
            status: 'in',
          },
        ],
        style: {
          'background-image': '',
        },
        status: 'show',
      },
      presets: presets,
      gradients: [],
      currentGradient: 0,
      circle: {
        spread: 5,
      },
      currentColor: '',
      currentColorIndex: 0,
      showCSS: false,
    };
  },
  computed: {
    getData: function () {
      return this.gradients[this.currentGradient];
    },
    getColors: function () {
      return this.gradients[this.currentGradient].colors;
    },
    presetsFilterd: function () {
      // Get 15 random elements
      var arr = [];
      var presets = this.cloneObj(this.presets);
      while (arr.length <= 14) {
        var r = Math.floor(Math.random() * this.presets.length) + 1;
        if (arr.indexOf(r) === -1)
          arr.push({
            index: r,
            preset: presets[r],
          });
      }
      return arr;
    },
    style: function () {
      var final = [];

      // First generator gradients
      this.generateGradients();

      this.gradients.forEach((gradient, index) => {
        if (gradient.status == 'hide') return;

        final.push(gradient.style['background-image']);
      });

      // Join everything together and assign
      return {
        'background-image': final.join(', '),
      };
    },
  },
  methods: {
    completed: function () {
      this.$root.$emit('completed-transition');
    },
    resetControls: function (e) {
      Object.assign(this.$data, this.$options.data.apply(this));
    },
    toggleControls: function (type, e) {
      var presets = this.showPresets;
      var controls = this.showControls;

      // Scrolling down
      if (e.deltaY > 0 || type == 'click') {
        if (presets) {
          // First hide presets if shown
          this.showPresets = false;
          return;
        }



        // or hide copy panel if shown
        if (this.showCSS) {
          this.showCSS = false;
          return;
        }

        this.showControls = false;
      }

      // Scrolling up (only handle controls as it might cause unexpected beahviour for user when showing presets as well)

      this.showControls = e.deltaY < 0 ? true : false;
    },
    cloneObj: function (obj) {
      return JSON.parse(JSON.stringify(obj));
    },
    sortColors: function (a, b) {
      // Only sort colors if they are not equal. This will prevent unexpected behaviour. For example, if use moves color stop over another one they might swap which is not what is expected
      if (a.stop != b.stop) return a.stop - b.stop;
    },
    addColorStop: function (e) {
      // First get percentage based on click x position
      var containerRect = e.target.getBoundingClientRect();
      var width = containerRect.width;
      var moveX = e.clientX - containerRect.left;

      // convert to percentage
      var percentage = (moveX * 100) / width;

      if (percentage < 0) percentage = 0;

      if (percentage > 100) percentage = 100;

      percentage = Math.round(percentage);

      // Choose a random color for the colors array and push it
      var color = this.randomColors[Math.floor(Math.random() * this.randomColors.length)];

      var colorObj = {
        value: color,
        stop: percentage,
        status: 'in',
      };

      var colors = this.gradients[this.currentGradient].colors;
      colors.push(colorObj);

      // Once the new stop is added to the array set it so user can change its color
      this.setColor(colors.length - 1);
    },
    generateGradients: function () {
      this.gradients.forEach((gradient, index) => {
        var gradientArray = [];
        var colorsArray = [];
        css = '';
        // Clone colors array and sort
        var colors = JSON.parse(JSON.stringify(gradient.colors));
        colors.sort(this.sortColors);

        colors.forEach(color => {
          // If color is out of view (i.e user dragged outside bar but has not deleted it yet dont show it)
          if (color.status == 'out') return;

          colorsArray.push(color.value + ' ' + color.stop + '%');
        });

        if (gradient.repeating.selected == true) css = 'repeating-';

        // Process each type by combining its related values and set the stack box to represent its colors

        if (gradient.type.selected == 'linear') {
          gradientArray.push(gradient.direction.amount + 'deg');

          gradientArray.push(colorsArray);
          css += 'linear-gradient(' + gradientArray.join(', ') + ')';

          this.gradients[index].style['background-image'] = css;
        }

        if (gradient.type.selected == 'radial') {
          var position = gradient.position;
          var sizeCSS = '';
          var size = '';
          if (gradient.shape.selected == 'ellipse') {
            size = gradient.size.ellipse;
            sizeCSS = size.width.amount + '% ' + size.height.amount + '%';
          } else {
            size = gradient.size.circle;
            sizeCSS = size.length.amount + 'px';
          }

          var positionCSS = position.horizontal.amount + '% ' + position.vertical.amount + '%';

          gradientArray.push(colorsArray);

          css +=
            'radial-gradient(' +
            gradient.shape.selected +
            ' ' +
            sizeCSS +
            ' at ' +
            positionCSS +
            ', ' +
            gradientArray.join(', ') +
            ')';

          this.gradients[index].style['background-image'] = css;
        }
      });
    },
    addGradient: function () {
      var newGradient = this.cloneObj(this.options);

      this.gradients.push(newGradient);
      this.setGradient(this.gradients.length - 1);
    },
    resetGradient: function () {
      var newGradient = this.cloneObj(this.options);
      Object.assign(this.$data.gradients[this.currentGradient], newGradient);
    },
    deleteColorStop: function (index) {
      this.gradients[this.currentGradient].colors.splice(index, 1);
    },
    setGradient: function (gradientIndex) {
      this.currentGradient = gradientIndex;
      this.setColor(0);
    },
    showGradient: function (gradientIndex) {
      /*
            Display gradient based on the provided index in the stack area.
             For radial graident that use circle shape we need to put elements in persepctive
            Circle width and height might be 1000px so it will be out of view
            */
      var gradient = this.gradients[gradientIndex];
      var type = gradient.type.selected;
      var shape = gradient.shape.selected;
      var bg = gradient.style['background-image'];

      if (type == 'radial' && shape == 'circle') {
        var size = gradient.size.circle.length.amount;

        // Create new size. 50 is the width of div
        var newSize = (size * 50) / 1000;
        var bg = bg.replace(size + 'px', newSize + 'px');
      }

      return {
        'background-image': bg,
      };
    },
    toggleGradient: function (gradientIndex) {
      // Show or hide gradient from the main stack
      var currentStatus = this.gradients[gradientIndex].status;
      this.gradients[gradientIndex].status = currentStatus == 'show' ? 'hide' : 'show';
    },
    deleteGradient: function (gradientIndex) {
      var length = this.gradients.length;
      // Delete only if we have more than one gradient
      if (length < 2) return;

      // First delete element
      this.gradients.splice(gradientIndex, 1);

      // We call length again here because it has changed after splice
      length = this.gradients.length;

      // set other elements
      this.setGradient(length - 1);

      // Make sure element is visible if it is last one.
      if (length == 1) this.gradients[this.currentGradient].status = 'show';
    },
    setColor: function (colorIndex) {
      this.currentColorIndex = colorIndex;
      this.currentColor = this.gradients[this.currentGradient].colors[colorIndex];
    },
    updatePicker: function (color) {
      if (color.rgba.a == 1) {
        this.currentColor.value = color.hex;
      } else {
        this.currentColor.value =
          'rgba(' + color.rgba.r + ', ' + color.rgba.g + ', ' + color.rgba.b + ', ' + color.rgba.a + ')';
      }
    },
    applyGradient: function (index) {
      // Apply gradient from presets colors to displayed gradient
      var displayedGradient = this.gradients[this.currentGradient];
      var preset = this.cloneObj(this.presets[index]);
      var type = preset.type;
      if (type == 'linear') displayedGradient.direction.amount = preset.direction;

      if (type == 'radial') {
        displayedGradient.position.vertical.amount = preset.vertical;
        displayedGradient.position.horizontal.amount = preset.horizontal;
        displayedGradient.shape.selected = preset.shape;
      }

      displayedGradient.type.selected = type;
      displayedGradient.colors = preset.colors;

      this.setColor(0);
    },
  },
  created() {
    this.addGradient();
    this.setColor(0);
  },
});

              
            
!
999px

Console