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&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