<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>
@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;
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 */
appearance: none;
&::slider-runnable-track {
width: $width;
height: $height;
background: $track-color;
border: none;
border-radius: 3px;
transition: all 0.2s;
}
&::slider-thumb {
appearance: none;
border: none;
height: $size;
width: $size;
border-radius: 50%;
background: $thumb;
margin-top: -4px;
}
&:focus {
outline: none;
&::range-track {
background: $track-focus;
}
&::slider-runnable-track {
background: $track-focus;
}
&::fill-lower {
background: $track-focus;
}
&::fill-upper {
background: $track-focus;
}
}
/* FF */
&::range-track {
width: $width;
height: $height;
background: $track-color;
border: none;
border-radius: 3px;
transition: all 0.2s;
z-index: 2;
}
&::range-thumb {
border: none;
height: $size;
width: $size;
border-radius: 50%;
background: $thumb;
z-index: 2;
}
/*hide the outline behind the border*/
&:focusring {
outline: 1px solid white;
outline-offset: -1px;
}
/* IE*/
&::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;
}
&::fill-lower {
background: $track-color;
border-radius: 10px;
}
&::fill-upper {
background: $track-color;
border-radius: 10px;
}
&::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);
}
}
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);
},
});
External CSS
This Pen doesn't use any external CSS resources.