vue-color实现多种渐变色css代码生成器效果代码
代码语言：html
所属分类：选择器
代码描述：vue-color实现多种渐变色css代码生成器效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@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");
body {
background-color: gray;
font-size: 16px;
margin: 0;
}
body * {
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;
}
#background-display {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
transition: transform 0.3s linear;
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), white;
background-position: 0 0, 1em 1em;
background-size: 2em 2em;
}
#background-display .show-gradient {
width: 100%;
height: 100%;
}
#background-display.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: #6f5802;
}
#dont-use-ie .text {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
}
#dont-use-ie .text a {
margin: 0 5px;
}
#dont-use-ie .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;
}
#dont-use-ie .close: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%);
}
#presets-fullview-container.show {
transform: translateY(0);
}
#presets-fullview-container .presets-wrapper {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, 90px);
grid-gap: 20px;
overflow: auto;
}
#presets-fullview-container .presets-wrapper > 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;
}
#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%);
}
#share-container.show {
transform: translateY(0%);
}
#share-container > 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;
}
#share-container > div i {
font-size: 0.5em;
}
#share-container > div: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;
}
#info-box-wrapper .info-box {
padding: 50px;
position: relative;
display: grid;
grid-template-columns: 15% 60% 15%;
grid-template-rows: 15% 85%;
grid-gap: 4em;
height: 100%;
}
#info-box-wrapper .info-box .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;
}
#info-box-wrapper .info-box h1 {
font-size: 1.5em;
margin: 15px 0;
font-family: Baloo;
color: #48443a;
}
#info-box-wrapper .info-box h2 {
font-size: 1.2em;
margin: 5px 0;
font-family: Baloo;
color: #48443a;
}
#info-box-wrapper .info-box p {
margin: 20px 0;
font-size: 0.8em;
line-height: 1.5em;
text-align: justify;
color: #48443a;
}
#info-box-wrapper .info-box p:first-child {
margin-top: 0;
}
#info-box-wrapper .info-box .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: #100f0c;
cursor: pointer;
justify-content: center;
align-items: center;
display: flex;
}
#info-box-wrapper .info-box .close:hover {
opacity: 1;
}
#info-box-wrapper .info-box .howto {
position: relative;
}
#info-box-wrapper .info-box .howto .howto-wrapper {
column-count: 3;
column-gap: 2.5em;
}
#info-box-wrapper .info-box .howto .howto-wrapper::after, #info-box-wrapper .info-box .howto .howto-wrapper::before {
content: "";
height: 80%;
width: 1px;
background-color: rgba(72, 68, 58, 0.1);
position: absolute;
right: -3.5%;
top: 10%;
}
#info-box-wrapper .info-box .howto .howto-wrapper::after {
left: -3.5%;
}
#info-box-wrapper .info-box .resources li {
list-style-type: none;
font-size: 0.9em;
line-height: 2em;
}
#info-box-wrapper .info-box .resources li a {
transition: all 0.2s;
opacity: 0.7;
color: #48443a;
text-decoration: none;
}
#info-box-wrapper .info-box .resources li a:hover {
opacity: 1;
}
#info-box-wrapper .info-box .resources li a:active, #info-box-wrapper .info-box .resources li a:visited {
color: #48443a;
}
#info-box-wrapper .info-box .resources hr {
border: 0.5px solid;
width: 50%;
position: relative;
color: rgba(72, 68, 58, 0.1);
}
#controls-container {
position: fixed;
bottom: 0;
left: 0;
min-height: 35vh;
width: 100vw;
transition: all 0.4s ease-in-out;
transform: translateY(80%);
}
#controls-container.show {
transform: translateY(0);
}
#controls-container .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%);
}
#controls-container .controls-wrapper .colors-slider {
width: 100%;
height: 40px;
margin-top: 10px;
position: relative;
grid-column: 1 / 6;
grid-row: 1;
}
#controls-container .controls-wrapper .colors-slider::after {
position: absolute;
bottom: -20px;
left: 0;
width: 100%;
height: 1px;
background-color: rgba(128, 128, 128, 0.3);
content: "";
}
#controls-container .controls-wrapper .colors-slider .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;
}
#controls-container .controls-wrapper .colors-slider .gradient-bar::before {
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), white;
background-position: 0 0, 0.5em 0.5em;
background-size: 1em 1em;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
z-index: -1;
}
#controls-container .controls-wrapper .colors-slider .color-stop {
position: absolute;
top: 0;
height: 100%;
width: 10px;
z-index: 1;
transform: translateX(-25%);
transition: box-shadow 0.2s;
}
#controls-container .controls-wrapper .colors-slider .color-stop.stackTop {
z-index: 2;
}
#controls-container .controls-wrapper .colors-slider .color-stop.hide {
display: none;
}
#controls-container .controls-wrapper .colors-slider .color-stop.selected {
z-index: 2;
}
#controls-container .controls-wrapper .colors-slider .color-stop.selected .color-view {
box-shadow: 0 0 0 2px #2b2b2b, 0 0 0px 5px rgba(189, 195, 199, 0.71);
}
#controls-container .controls-wrapper .colors-slider .color-stop.selected .stop-input input {
box-shadow: inset 0 0 0 2px #bdc3c7;
opacity: 1;
font-size: 1em;
transform: translate(0, 15%);
}
#controls-container .controls-wrapper .colors-slider .color-stop .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;
}
#controls-container .controls-wrapper .colors-slider .color-stop .color-view:hover {
box-shadow: 0 0 0 2px #2b2b2b, 0 0 0px 5px rgba(180, 180, 180, 0.6);
}
#controls-container .controls-wrapper .colors-slider .color-stop .stop-input {
position: absolute;
bottom: 100%;
left: 0%;
transform: translate(-50%, -80%);
}
#controls-container .controls-wrapper .colors-slider .color-stop .stop-input 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;
}
#controls-container .controls-wrapper .title {
width: 20%;
}
#controls-container .controls-wrapper .title h1 {
position: relative;
margin: 40px 0 60px 0;
color: #16527a;
font-size: 2.5em;
font-weight: bold;
line-height: 1.2em;
}
#controls-container .controls-wrapper .title h1::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: rgba(52, 152, 219, 0.9);
}
#controls-container .controls-wrapper 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;
}
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container {
max-height: 200px;
overflow: auto;
margin-bottom: 10px;
}
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > 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;
}
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div.noneed .delete,
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div.noneed .hide {
display: none;
}
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div.highlight, #controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div:hover {
opacity: 1;
}
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div.highlight .hide,
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div.highlight .delete, #controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div:hover .hide,
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div:hover .delete {
transform: translateX(0%);
}
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div.highlight .hide:hover,
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div.highlight .delete:hover, #controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div:hover .hide:hover,
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div:hover .delete:hover {
opacity: 1;
}
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div .gradient-box-container {
grid-column: 1;
grid-row: 1 / span 2;
border-radius: 0px;
z-index: 3;
position: relative;
display: block;
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), white;
background-position: 0 0, 0.25em 0.25em;
background-size: 0.5em 0.5em;
}
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div .gradient-box-container .gradient-box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div .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+");
}
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div .hide.hidden {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyIDMyIiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTguMTA4Njk4OTEsMjAuODkxMzAxMSBDNC42MTcyMDgxNiwxOC44MzAxMTQ3IDMsMTYgMywxNiBDMywxNiA3LDkgMTYsOSBDMTcuMzA0NTEwNyw5IDE4LjUwMzk3NTIsOS4xNDcwNjQ2NiAxOS42MDE0Mzg4LDkuMzk4NTYxMjIgTDE2Ljg5ODY1MzEsMTIuMTAxMzQ2OSBDMTYuNjA5Nzg4NSwxMi4wMzUwMzQyIDE2LjMwODk4NTYsMTIgMTYsMTIgQzEzLjc5MDg2MDksMTIgMTIsMTMuNzkwODYwOSAxMiwxNiBDMTIsMTYuMzA4OTg1NiAxMi4wMzUwMzQyLDE2LjYwOTc4ODUgMTIuMTAxMzQ2OSwxNi44OTg2NTMxIEw4LjEwODY5ODkxLDIwLjg5MTMwMTEgTDguMTA4Njk4OTEsMjAuODkxMzAxMSBMOC4xMDg2OTg5MSwyMC44OTEzMDExIFogTTEyLjM5ODU2MSwyMi42MDE0MzkgQzEzLjQ5NjAyNDYsMjIuODUyOTM1NiAxNC42OTU0ODkyLDIzLjAwMDAwMDEgMTYsMjMgQzI1LDIyLjk5OTk5OSAyOSwxNiAyOSwxNiBDMjksMTYgMjcuMzgyNzkxOCwxMy4xNjk4ODU2IDIzLjg5MTMwMDgsMTEuMTA4Njk5MiBMMTkuODk4NjUzMSwxNS4xMDEzNDY5IEMxOS45NjQ5NjU4LDE1LjM5MDIxMTUgMjAsMTUuNjkxMDE0NCAyMCwxNiBDMjAsMTguMjA5MTM5MSAxOC4yMDkxMzkxLDIwIDE2LDIwIEMxNS42OTEwMTQ0LDIwIDE1LjM5MDIxMTUsMTkuOTY0OTY1OCAxNS4xMDEzNDY5LDE5Ljg5ODY1MzEgTDEyLjM5ODU2MSwyMi42MDE0MzkgTDEyLjM5ODU2MSwyMi42MDE0MzkgTDEyLjM5ODU2MSwyMi42MDE0MzkgWiBNMTksMTYgQzE5LjAwMDAwMDEsMTYuNzY3NzY2OSAxOC43MDcxMDY4LDE3LjUzNTUzMzkgMTguMTIxMzIwMywxOC4xMjEzMjAzIEMxNy41MzU1MzM5LDE4LjcwNzEwNjggMTYuNzY3NzY2OSwxOS4wMDAwMDAxIDE2LDE5IEwxOSwxNiBMMTksMTYgTDE5LDE2IFogTTE2LDEzIEMxNS4yMzIyMzMxLDEyLjk5OTk5OTkgMTQuNDY0NDY2MSwxMy4yOTI4OTMyIDEzLjg3ODY3OTcsMTMuODc4Njc5NyBDMTMuMjkyODkzMiwxNC40NjQ0NjYxIDEyLjk5OTk5OTksMTUuMjMyMjMzMSAxMywxNiBMMTYsMTMgTDE2LDEzIEwxNiwxMyBaIE0yNCw3IEw3LDI0IEw4LDI1IEwyNSw4IEwyNCw3IEwyNCw3IFoiLz48L2c+PC9nPjwvc3ZnPg==");
}
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div .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;
}
#controls-container .controls-wrapper .gradients-stack .add-gradient {
opacity: 1;
color: #196090;
height: 25px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #3498db;
border-radius: 2px;
cursor: pointer;
}
#controls-container .controls-wrapper .gradients-stack .add-gradient:hover {
background-color: #5faee3;
}
#controls-container .controls-wrapper .colors-options-container {
display: flex;
flex-wrap: wrap;
position: relative;
align-content: flex-start;
}
#controls-container .controls-wrapper .colors-options-container::after, #controls-container .controls-wrapper .colors-options-container::before {
position: absolute;
top: 10%;
right: -12.5px;
height: 80%;
width: 1px;
background-color: rgba(128, 128, 128, 0.1);
content: "";
}
#controls-container .controls-wrapper .colors-options-container::before {
left: -12.5px;
}
#controls-container .controls-wrapper .colors-options-container .colors-options-top {
width: 100%;
width: 100%;
display: grid;
justify-items: center;
grid-template-columns: 1fr 1fr 1fr;
}
#controls-container .controls-wrapper .colors-options-container .colors-options-bottom {
justify-content: center;
display: flex;
width: 100%;
padding: 1em 0;
flex-direction: column;
min-height: 150px;
}
#controls-container .controls-wrapper .color-stops-container .vc-chrome {
width: 100%;
box-shadow: 0 0 1px 0 gray;
}
#controls-container .controls-wrapper .color-stops-container .vc-chrome .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 black;
}
#controls-container .controls-wrapper .color-presets-container {
display: flex;
flex-direction: column;
}
#controls-container .controls-wrapper .color-presets-container .user-generated {
border-bottom: 1px solid rgba(180, 180, 180, 0.4);
display: grid;
width: 100%;
grid-template-columns: 70% 30%;
padding: 10px;
}
#controls-container .controls-wrapper .color-presets-container .user-generated .user-presets {
display: grid;
grid-template-columns: repeat(auto-fill, 35px);
grid-gap: 10px;
padding: 5px 0px;
}
#controls-container .controls-wrapper .color-presets-container .user-generated .user-presets::after {
content: "";
background-color: rgba(180, 180, 180, 0.4);
position: absolute;
right: 0;
top: 20%;
height: 80%;
width: 1px;
}
#controls-container .controls-wrapper .color-presets-container .user-generated .user-presets > 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;
}
#controls-container .controls-wrapper .color-presets-container .user-generated .user-presets > span.selected {
box-shadow: 0 0 4px 3px rgba(0, 0, 0, 0.7);
}
#controls-container .controls-wrapper .color-presets-container .user-generated .presets-actions {
display: flex;
justify-content: space-around;
padding: 5px 0px;
}
#controls-container .controls-wrapper .color-presets-container .user-generated .presets-actions > div {
filter: grayscale(1);
opacity: 0.2;
cursor: default;
transition: all 0.2s;
width: 45%;
color: #00a5d2;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid;
border-radius: 2px;
font-size: 0.9em;
padding: 5px;
background-color: #6ce0ff;
}
#controls-container .controls-wrapper .color-presets-container .user-generated .presets-actions > div.save-preset {
color: #1b7943;
background-color: #54d98c;
}
#controls-container .controls-wrapper .color-presets-container .user-generated .presets-actions.enable-save .save-preset, #controls-container .controls-wrapper .color-presets-container .user-generated .presets-actions.enable-apply .apply-preset {
opacity: 1;
cursor: pointer;
filter: grayscale(0);
}
#controls-container .controls-wrapper .color-presets-container .user-generated .presets-actions.enable-save .save-preset:hover, #controls-container .controls-wrapper .color-presets-container .user-generated .presets-actions.enable-apply .apply-preset:hover {
opacity: 0.7;
}
#controls-container .controls-wrapper .color-presets-container .other-presets {
display: grid;
grid-template-columns: repeat(auto-fill, 35px);
grid-gap: 10px;
padding: 10px;
max-height: 220px;
overflow: auto;
width: 100%;
}
#controls-container .controls-wrapper .color-presets-container .other-presets > .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;
}
#controls-container .controls-wrapper .color-presets-container .more-presets {
opacity: 1;
color: #6d2b00;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #d35400;
border-radius: 2px;
transition: all 0.2s;
font-size: 0.7em;
padding: 5px;
margin: 10px;
cursor: pointer;
}
#controls-container .controls-wrapper .color-presets-container .more-presets:hover {
background-color: #ff6a07;
}
#controls-container .controls-wrapper .user-actions-container {
display: flex;
flex-direction: column;
}
#controls-container .controls-wrapper .user-actions-container > div {
opacity: 1;
color: #623475;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #9b59b6;
border-radius: 2px;
transition: all 0.2s;
font-size: 0.7em;
padding: 5px;
margin: 10px 0;
cursor: pointer;
}
#controls-container .controls-wrapper .user-actions-container > div.reset {
color: #a82315;
border: 1px solid #e74c3c;
margin-top: auto;
}
#controls-container .controls-wrapper .user-actions-container > div.reset:hover {
background-color: #ed7669;
}
#controls-container .controls-wrapper .user-actions-container > div:hover {
background-color: #b07cc6;
color: white;
}
#controls-container .controls-wrapper .user-actions-container > div.share {
animation: share-btn 15s forwards infinite;
color: white;
opacity: 0.8;
background-color: #9b59b6;
}
#controls-container .controls-wrapper .user-actions-container > div.share:hover {
opacity: 1;
}
@keyframes share-btn {
10% {
background-color: #3b5999;
border-color: #3b5999;
}
20% {
background-color: #dd4b39;
border-color: #dd4b39;
}
30% {
background-color: #ff5700;
border-color: #ff5700;
}
40% {
background-color: #55acee;
border-color: #55acee;
}
50% {
background-color: #0077B5;
border-color: #0077B5;
}
60% {
background-color: #bd081c;
border-color: #bd081c;
}
70% {
background-color: #34465d;
border-color: #34465d;
}
80% {
background-color: #f57d00;
border-color: #f57d00;
}
90% {
background-color: #c71610;
border-color: #c71610;
}
100% {
background-color: #21759b;
border-color: #21759b;
}
}
#controls-container .controls-wrapper .control {
display: flex;
font-size: 0.7em;
}
#controls-container .controls-wrapper .control.toggle {
color: white;
cursor: pointer;
text-align: center;
text-transform: uppercase;
height: 3em;
width: 3em;
}
#controls-container .controls-wrapper .control.toggle > div {
display: flex;
width: 100%;
padding: 0.3em;
background-color: #3498db;
border-radius: 5px;
transition: all 0.3s;
opacity: 1;
position: relative;
}
#controls-container .controls-wrapper .control.toggle > div: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;
}
#controls-container .controls-wrapper .control.toggle > div:hover {
background-color: #258cd1;
}
#controls-container .controls-wrapper .control.toggle > div:hover:after {
transform: translate(-50%, -150%) scale(1);
opacity: 1;
}
#controls-container .controls-wrapper .control.toggle > div.off {
opacity: 0.5;
}
#controls-container .controls-wrapper .control.toggle > div .icon {
flex-grow: 1;
background-repeat: no-repeat;
padding: 10px;
display: block;
}
#controls-container .controls-wrapper .control.range {
padding: 0.9em 0;
width: 100%;
position: relative;
display: flex;
}
#controls-container .controls-wrapper .control.range .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;
}
#controls-container .controls-wrapper .control.range .amount {
width: 20%;
display: inline-flex;
font-size: 0.7em;
justify-content: flex-end;
align-items: center;
}
#controls-container .controls-wrapper .control.range .range {
width: 75%;
display: inline-flex;
align-items: center;
}
#controls-container .controls-wrapper .control.color {
margin-bottom: 10px;
width: 100%;
border: 1px solid rgba(180, 180, 180, 0.7);
border-radius: 5px;
overflow: hidden;
padding: 3px 5px;
}
#controls-container .controls-wrapper .control.color > span {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
#controls-container .controls-wrapper .control.color .color-box {
width: 20%;
position: relative;
}
#controls-container .controls-wrapper .control.color .color-box > span {
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
cursor: pointer;
}
#controls-container .controls-wrapper .control.color .color-box > span::after, #controls-container .controls-wrapper .control.color .color-box > span::before {
position: absolute;
top: 0%;
right: -30%;
height: 100%;
width: 1px;
background-color: rgba(180, 180, 180, 0.7);
content: "";
}
#controls-container .controls-wrapper .control.color .color-box > span::before {
left: -30%;
}
#controls-container .controls-wrapper .control.color .color-input {
flex-grow: 1;
}
#controls-container .controls-wrapper .control.color .color-stop {
width: 30%;
}
#controls-container .controls-wrapper .control.color .color-stop input {
text-align: center;
}
#controls-container .controls-wrapper .control.color .color-delete {
width: 10%;
transition: all 0.2s;
font-size: 2em;
cursor: pointer;
opacity: 0.5;
}
#controls-container .controls-wrapper .control.color .color-delete:hover:not(.disabled) {
opacity: 1;
}
#controls-container .controls-wrapper .control.color .color-delete.disabled {
opacity: 0;
cursor: default;
}
#controls-container .controls-wrapper .control.color input {
padding: 5px 10px;
border: 0px solid gray;
width: 100%;
outline: 0;
}
#controls-container .controls-wrapper .control.circle {
position: relative;
justify-content: center;
}
#controls-container .controls-wrapper .control.circle svg g circle:last-child {
cursor: pointer;
}
#controls-container .controls-wrapper .control.circle .amount {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5em;
text-align: center;
display: flex;
flex-direction: column;
}
#controls-container .controls-wrapper .control.circle .amount input {
border: 0px solid;
width: auto;
text-align: center;
font-size: 1.2em;
}
#controls-container .controls-wrapper .control.circle .amount span:last-child {
font-size: 0.7em;
}
#controls-container .controls-wrapper .control.switch {
display: flex;
margin: 1.2em 0;
color: rgba(180, 180, 180, 0.5);
flex-direction: column;
}
#controls-container .controls-wrapper .control.switch input {
display: none;
}
#controls-container .controls-wrapper .control.switch input:checked + label {
background-color: #3498db;
}
#controls-container .controls-wrapper .control.switch input:checked + label .switch {
left: 55%;
}
#controls-container .controls-wrapper .control.switch 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;
}
#controls-container .controls-wrapper .control.switch label span {
background-color: white;
height: 80%;
width: 40%;
position: absolute;
border-radius: 50%;
left: 5%;
top: 8%;
transition: all 0.3s;
}
input[type="range"] {
/* 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;
/* FF */
/*hide the outline behind the border*/
/* IE*/
}
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 3px;
background: #ddd;
border: none;
border-radius: 3px;
transition: all 0.2s;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 10px;
width: 10px;
border-radius: 50%;
background: #3498db;
margin-top: -4px;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]:focus::-moz-range-track {
background: #75b9e7;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
background: #75b9e7;
}
input[type="range"]:focus::-ms-fill-lower {
background: #75b9e7;
}
input[type="range"]:focus::-ms-fill-upper {
background: #75b9e7;
}
input[type="range"]::-moz-range-track {
width: 100%;
height: 3px;
background: #ddd;
border: none;
border-radius: 3px;
transition: all 0.2s;
z-index: 2;
}
input[type="range"]::-moz-range-thumb {
border: none;
height: 10px;
width: 10px;
border-radius: 50%;
background: #3498db;
z-index: 2;
}
input[type="range"]:-moz-focusring {
outline: 1px solid white;
outline-offset: -1px;
}
input[type="range"]::-ms-track {
width: 100%;
height: 3px;
/*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;
}
input[type="range"]::-ms-fill-lower {
background: #ddd;
border-radius: 10px;
}
input[type="range"]::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
input[type="range"]::-ms-thumb {
border: none;
height: 10px;
width: 10px;
border-radius: 50%;
background: #3498db;
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);
}
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="app">
<info-box></info-box>
<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='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='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>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue-color.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue-circle-slider.browser.js"></script>
<script >
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&q.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0