HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div id="app">
<info-box></info-box>
<social-networks :show='showShare'></social-networks>
<transition name="hide-background">
<div id='background-display' v-if="showInfo == false" :class='{"show-social-networks": (showShare == true)}'>
<no-ie></no-ie>
<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='title'>
<h1 data-title='Gradient Generator'>Gradient Generator</h1>
</div> -->
<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='copy-css' @click='copyCSS'>{{copyCSSText}}</div>
<div class='info' @click='showInfo = true; showShare = false'>Info</div>
<div class='share' @click='showShare = true'>Share</div>
<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'><i class="icon ion-md-checkmark-circle-outline"></i></div>
<div class='save-preset' @click='savePreset'><i class="icon ion-md-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'>
<circle-slider v-model="direction.amount" :min="0" :max="360" circle-color="#2980b9" progress-color="#2980b9" :side=120 knob-color="#2c3e50" :circle-width="4" :progress-width="4" :knob-radius=7></circle-slider>
<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='social-networks'>
<div id='share-container' :class='{show: show == true}'>
<div v-for='(network, index) in networks' :href='network.link' target='_blank' @click="openPopup(network.link)" :style="{'background-color': [network.color]}">
<i class="icon" :class="[network.icon]"></i>
</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='no-ie'>
<div id='dont-use-ie' v-if='showIENotification'>
<span class='text'>This gradient generator works on IE/Edge but for better performance please consider using <a href="https://www.google.com/chrome/" target="_blank">Chrome</a> or <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a>.</span>
<span class='close' @click="clearNotification">×</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='welcome'>
<h1>Welcome</h1>
<p>Thanks for using Kalimah Gradient Generator. 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'>
<p>Using the generator should be straight forward. I will, however, provide some details in this section for competence of the project.</p>
<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 as there is no point in using them.</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. You can also modify the alpha channel of the color if you wish.</p>
<p>The color box is designed similar to Chrome developer tools color picker. So if you are familiar with that picker it should be similar to this one.</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='https://github.com/devstark-com/vue-circle-slider'>Vue circle slider</a></li>
<li><a target="_blank" href='http://vue-color.surge.sh/'>Vue Color</a></li>
<li><a target="_blank" href='https://github.com/DamonOehlman/detect-browser'>detect-browser</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='http://www.socicon.com/'>Socicon</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://unpkg.com/ionicons@4.4.8/dist/css/ionicons.min.css');
@import url('https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?9ukd8d');
body {
background-color: gray;
font-size: 16px;
margin: 0;
* {
box-sizing: border-box;
font-family: "Roboto", sans-serif;
/* iOS Safari */
-webkit-touch-callout: none;
/* Safari */
-webkit-user-select: none;
/* Konqueror HTML */
-khtml-user-select: none;
/* Firefox */
-moz-user-select: none;
/* Internet Explorer/Edge */
-ms-user-select: none;
/* Non-prefixed version, currently supported by Chrome and Opera */
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-social-networks
{
transform: translatey(-10vh);
}
}
#dont-use-ie
{
position: fixed;
top: 0;
left: 0;
width: 100vw;
padding: 0.8em;
display: flex;
font-size: 1.1em;
background: #fde073;
animation: show-ie 0.5s forwards;
color: darken(#fde073, 50%);
.text
{
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
a
{
margin: 0 5px;
}
}
.close
{
font-size: 1.3em;
cursor: pointer;
width: 1.3em;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.6;
transition: all 0.3s;
&:hover
{
opacity: 1;
}
}
}
#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, 90px);
grid-gap: 20px;
overflow: auto;
> div {
height: 90px;
border: 2px solid white;
box-shadow: 0 0 1px 2px rgba(180, 180, 180, 0.8);
border-radius: 3px;
overflow: hidden;
cursor: pointer;
}
}
}
// http://www.socicon.com/chart.php
// https://www.materialui.co/socialcolors
#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;
font-family: 'Socicon' !important;
color: white;
i
{
font-size: 0.5em;
}
&:hover
{
opacity: 1;
}
}
}
#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: 50px;
position: relative;
display: grid;
grid-template-columns: 15% 60% 15%;
grid-template-rows: 15% 85%;
grid-gap: 4em;
height: 100%;
.logo {
grid-column: 1 / 4;
grid-row: 1;
font-size: 3.5em;
background: purple;
background-color: #DCD9D4;
background-image: linear-gradient(90deg, #9795f0, #fbc8d4, #13547a, #80d0c7, #88d3ce, #6e45e2);
background-size: 600% 600%;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-family: "Fredoka One";
animation: move-gradient 30s ease infinite reverse;
}
h1 {
font-size: 1.5em;
margin: 15px 0;
font-family: Baloo;
color: $color;
}
h2 {
font-size: 1.2em;
margin: 5px 0;
font-family: Baloo;
color: $color;
}
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;
}
}
.howto {
position: relative;
.howto-wrapper {
column-count: 3;
column-gap: 2.5em;
&::after,
&::before {
content: "";
height: 80%;
width: 1px;
background-color: fade_out($color, 0.9);
position: absolute;
right: -3.5%;
top: 10%;
}
&::after {
left: -3.5%;
}
}
}
.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;
}
}
&::after {
//content: "🔗";
}
}
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: all 0.4s ease-in-out;
transform: translateY(80%);
&.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%);
.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);
}
}
}
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;
}
.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%);
&.save-preset {
$color: #2ECC71;
color: darken($color, 20%);
background-color: lighten($color, 10%);
}
}
&.enable-save .save-preset,
&.enable-apply .apply-preset {
opacity: 1;
cursor: pointer;
filter: grayscale(0);
&:hover {
opacity: 0.7;
}
}
}
}
.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;
}
&.share
{
animation: share-btn 15s forwards infinite;
color: white;
opacity: 0.8;
background-color: #9b59b6;
&:hover
{
opacity: 1;
}
}
}
}
$colors: #3b5999 #dd4b39 #ff5700 #55acee #0077B5 #bd081c #34465d #f57d00 #c71610 #21759b;
@keyframes share-btn {
@for $i from 1 through 10 {
#{$i * 10%} {
background-color: nth($colors, $i);
border-color: nth($colors, $i);
}
}
}
.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;
svg {
g circle:last-child {
cursor: pointer;
}
}
.amount {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5em;
text-align: center;
display: flex;
flex-direction: column;
input {
border: 0px solid;
width: auto;
text-align: center;
font-size: 1.2em;
}
span:last-child {
font-size: 0.7em;
}
}
}
&.switch {
display: flex;
margin: 1.2em 0;
color: rgba(180, 180, 180, 0.5);
flex-direction: column;
input {
display: none;
&:checked + label {
background-color: #3498db;
.switch {
left: 55%;
}
}
}
label {
width: 30px;
height: 15px;
border-radius: 10px;
background-color: gray;
display: inline-block;
margin-right: 10px;
position: relative;
transition: all 0.3s;
cursor: pointer;
span {
background-color: white;
height: 80%;
width: 40%;
position: absolute;
border-radius: 50%;
left: 5%;
top: 8%;
transition: all 0.3s;
}
}
}
}
}
}
input[type="range"] {
$thumb: #3498db;
$size: 10px;
$width: 100%;
$height: 3px;
$track-color: #ddd;
$track-focus: lighten($thumb, 15%);
/* fix for FF unable to apply focus style bug */
border: 1px solid transparent;
/*required for proper track sizing in FF*/
width: 100%;
/* Webkit */
-webkit-appearance: none;
&::-webkit-slider-runnable-track {
width: $width;
height: $height;
background: $track-color;
border: none;
border-radius: 3px;
transition: all 0.2s;
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: $size;
width: $size;
border-radius: 50%;
background: $thumb;
margin-top: -4px;
}
&:focus {
outline: none;
&::-moz-range-track {
background: $track-focus;
}
&::-webkit-slider-runnable-track {
background: $track-focus;
}
&::-ms-fill-lower {
background: $track-focus;
}
&::-ms-fill-upper {
background: $track-focus;
}
}
/* FF */
&::-moz-range-track {
width: $width;
height: $height;
background: $track-color;
border: none;
border-radius: 3px;
transition: all 0.2s;
z-index: 2;
}
&::-moz-range-thumb {
border: none;
height: $size;
width: $size;
border-radius: 50%;
background: $thumb;
z-index: 2;
}
/*hide the outline behind the border*/
&:-moz-focusring {
outline: 1px solid white;
outline-offset: -1px;
}
/* IE*/
&::-ms-track {
width: $width;
height: $height;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
&::-ms-fill-lower {
background: $track-color;
border-radius: 10px;
}
&::-ms-fill-upper {
background: $track-color;
border-radius: 10px;
}
&::-ms-thumb {
border: none;
height: $size;
width: $size;
border-radius: 50%;
background: $thumb;
transform: translateY(20%);
}
}
@keyframes move-gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
/*
Hide background animation
*/
.hide-background-enter-active {
animation: hide-background 1.5s reverse ease-in forwards;
}
.hide-background-leave-active {
animation: hide-background 1s ease-in forwards;
}
@keyframes hide-background {
0% {
transform: scale(1) perspective(500px) rotateX(0deg);
}
50% {
transform: scale(0.8) perspective(500px) rotateX(2deg);
}
100% {
transform: scale(0.8) perspective(500px) rotateX(2deg) translatey(-120%);
}
}
/*
Show info animation
*/
.show-info-enter-active {
animation: show-info 1s ease-in forwards;
}
.show-info-leave-active {
animation: show-info 1s reverse forwards;
}
@keyframes show-info {
0% {
transform: translateY(100%);
opacity: 0;
}
50% {
transform: translateY(100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes show-ie {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
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);
/* The circular slider has animation that is slow and cant be disabled through the provided options. This method will override the animating method and display the results instantly (withouth animations)
Solution reference: https://stackoverflow.com/questions/43116647/overriding-a-component-method/43121345 (For APPS)
https://jsfiddle.net/wffranco/1zec7xL3/ (For browsers)
Source reference: https://github.com/devstark-com/vue-circle-slider/blob/master/src/components/CircleSlider.vue#L285
*/
const Base = Vue.options.components["circle-slider"];
const circularControl = Base.extend({
methods: {
animateSlider(startAngle, endAngle) {
this.updateAngle(endAngle);
}
}
});
var inputHabdle = {
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: [inputHabdle],
template: "#circular-control",
props: ['direction'],
components: {
"circle-slider": slider
},
methods: {
setValue: function(value) {
this.direction.amount = value;
},
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;
}
}
}
});
Vue.component('social-networks', {
template: "#social-networks",
props: ["show"],
data() {
return {
popupa: null
}
},
methods: {
openPopup: function(link) {
this.popup.window = window.open(
link,
'sharer',
'status=no,height=' + this.popup.height +
',width=' + this.popup.width +
',resizable=no,left=' + this.popup.left +
',top=' + this.popup.top +
',screenX=' + this.popup.left +
',screenY=' + this.popup.top + ',toolbar=no,menubar=no,scrollbars=no,location=no,directories=no'
);
}
},
computed: {
popup: function() {
var popup = {};
popup.height = 500;
popup.width = 500;
popup.top = window.outerHeight / 2 + window.screenY - (popup.height / 2)
popup.left = window.outerWidth / 2 + window.screenX - (popup.width / 2)
popup.window = null;
return popup;
},
networks: function() {
var url = 'https://codepen.io/khr2003/full/RENwGK';
var title = 'Kalimah Gradient Generator';
var desc = 'A user friendly, ease to use and comprehensive gradient generator.';
var text = desc;
var email_text = 'Hi, \r\n Check this awesome gradient maker ' +url;
var provider ='';
// Twitter and tumblr
var hash_tags = 'gradient_generator';
var user_id = '';
var networkArray = [{
link: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
icon: "socicon-facebook",
type: "popup",
color: "#3b5999"
},
{
link: `https://plus.google.com/share?url=${url}`,
icon: "socicon-googleplus",
type: "popup",
color: "#dd4b39"
},
{
link: `https://reddit.com/submit?url=${url}&title=${title}`,
icon: "socicon-reddit",
type: "popup",
color: "#ff5700"
},
{
link: `https://twitter.com/intent/tweet?url=${url}&text=${title}&hashtags=${hash_tags}
`,
icon: "socicon-twitter",
type: "popup",
color: "#55acee"
},
{
link: `https://www.linkedin.com/shareArticle?mini=true&url=${url}&title=${title}&summary=${text}&source=${provider}`,
icon: "socicon-linkedin",
type: "popup",
color: "#0077B5"
},
{
link: `http://pinterest.com/pin/create/link/?url=${url}`,
icon: "socicon-pinterest",
type: "popup",
color: "#bd081c"
},
{
link: `https://www.tumblr.com/widgets/share/tool?canonicalUrl=${url}&title=${title}&caption=${text}&tags=${hash_tags}`,
icon: "socicon-tumblr",
type: "popup",
color: "#34465d"
},
{
link: `https://www.blogger.com/blog-this.g?u=${url}&n=${title}&t=${text}`,
icon: "socicon-blogger",
type: "popup",
color: "#f57d00"
},
{
link: `https://mail.google.com/mail/?view=cm&to=&su=${title}&body=${email_text}`,
icon: "socicon-mail",
type: "popup",
color: "#c71610"
},
{
link: `mailto:?subject=${title}&body=${text}`,
icon: "socicon-mailru",
type: "popup",
color: "#21759b"
}
];
return networkArray;
}
}
});
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('no-ie', {
template: "#no-ie",
data() {
return {
showIENotification: false
}
},
methods: {
// https://unpkg.com/detect-browser
detectBrowser: function(e) {
var browsers = this.getBrowserRules();
var userAgentString = navigator.userAgent;
if (!userAgentString) {
return null;
}
var detected = browsers.map(function(browser) {
var match = browser.rule.exec(userAgentString);
var version = match && match[1].split(/[._]/).slice(0, 3);
if (version && version.length < 3) {
version = version.concat(version.length == 1 ? [0, 0] : [0]);
}
return match && {
name: browser.name,
version: version.join('.')
};
}).filter(Boolean)[0] || null;
if (/alexa|bot|crawl(er|ing)|facebookexternalhit|feedburner|google web preview|nagios|postrank|pingdom|slurp|spider|yahoo!|yandex/i.test(userAgentString)) {
detected = detected || {};
detected.bot = true;
}
return detected;
},
getBrowserRules: function() {
return this.buildRules([
['aol', /AOLShield\/([0-9\._]+)/],
['edge', /Edge\/([0-9\._]+)/],
['yandexbrowser', /YaBrowser\/([0-9\._]+)/],
['vivaldi', /Vivaldi\/([0-9\.]+)/],
['kakaotalk', /KAKAOTALK\s([0-9\.]+)/],
['samsung', /SamsungBrowser\/([0-9\.]+)/],
['chrome', /(?!Chrom.*OPR)Chrom(?:e|ium)\/([0-9\.]+)(:?\s|$)/],
['phantomjs', /PhantomJS\/([0-9\.]+)(:?\s|$)/],
['crios', /CriOS\/([0-9\.]+)(:?\s|$)/],
['firefox', /Firefox\/([0-9\.]+)(?:\s|$)/],
['fxios', /FxiOS\/([0-9\.]+)/],
['opera', /Opera\/([0-9\.]+)(?:\s|$)/],
['opera', /OPR\/([0-9\.]+)(:?\s|$)$/],
['ie', /Trident\/7\.0.*rv\:([0-9\.]+).*\).*Gecko$/],
['ie', /MSIE\s([0-9\.]+);.*Trident\/[4-7].0/],
['ie', /MSIE\s(7\.0)/],
['bb10', /BB10;\sTouch.*Version\/([0-9\.]+)/],
['android', /Android\s([0-9\.]+)/],
['ios', /Version\/([0-9\._]+).*Mobile.*Safari.*/],
['safari', /Version\/([0-9\._]+).*Safari/],
['facebook', /FBAV\/([0-9\.]+)/],
['instagram', /Instagram\s([0-9\.]+)/],
['ios-webview', /AppleWebKit\/([0-9\.]+).*Mobile/]
]);
},
buildRules: function(ruleTuples) {
return ruleTuples.map(function(tuple) {
return {
name: tuple[0],
rule: tuple[1]
};
});
},
clearNotification: function() {
/* Clear IE notification for one week*/
this.showIENotification = false;
var week = 60 * 60 * 24 * 7 * 1000;
var time_now = (new Date()).getTime() + week;
localStorage.setItem('ie-notification', time_now);
}
},
mounted() {
/*
On mount check if we need to show IE notifcation. IF so, show it, otherwise wait intul one week has passed
*/
var last_cleared = parseInt(localStorage.getItem('ie-notification')) || 0;
var time_now = (new Date()).getTime();
var week = 1000 * 60 * 60 * 24;
// .getTime() returns milliseconds so 1000 * 60 * 60 * 24 = 24 days
if ((time_now - last_cleared) > week) {
var detect = this.detectBrowser();
if (detect.name == "ie" || detect.name == "edge")
this.showIENotification = true;
localStorage.setItem('ie-notification', 0);
}
}
});
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: [inputHabdle],
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: "#2c3e50",
stop: 25,
status: "in"
},
{
value: "#2980b9",
stop: 75,
status: "in"
}
],
style: {
"background-image": ""
},
status: "show"
},
presets: presets,
gradients: [],
currentGradient: 0,
circle: {
spread: 5
},
currentColor: "",
currentColorIndex: 0,
copyCSSResults: "",
showShare: 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']);
});
// reset copied text
this.copyCSSResults = "";
// Join everything together and assign
return {
"background-image": final.join(", ")
};
},
copyCSSText: function() {
return (this.copyCSSResults != "") ? this.copyCSSResults : "Copy CSS";
}
},
methods: {
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;
}
// Second hide share panel if shown
if (this.showShare) {
this.showShare = 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 randome 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);
},
copyCSS: function() {
// https://stackoverflow.com/a/33928558
var text = "background: " + this.style["background-image"] + ";";
var _this = this;
if (navigator.clipboard != undefined) {
navigator.clipboard.writeText(text).then(function() {
_this.copyCSSResults = "Copied !!!";
}, function(err) {
_this.copyCSSResults = "Failed :(";
});
} else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
var textarea = document.createElement("textarea");
textarea.textContent = text;
textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in MS Edge.
document.body.appendChild(textarea);
textarea.select();
try {
_this.copyCSSResults = "Copied !!!";
return document.execCommand("copy"); // Security exception may be thrown by some browsers.
} catch (ex) {
_this.copyCSSResults = "Failed :(";
return false;
} finally {
document.body.removeChild(textarea);
}
}
}
},
created() {
this.addGradient();
this.setColor(0);
/* this.$root.$on('sortColor', (index) => {
this.sortColor(index)
})*/
}
});
Also see: Tab Triggers