CSS
html,
body {
height: 100%;
}
body {
font: 1em/1.5 Verdana, Geneva, sans-serif;
margin: 0;
padding: 0;
color: #555;
overflow-x: hidden;
min-height: 1000px;
}
#main {
display: grid;
position: absolute;
top: 24px;
right: 0;
gap: 4px;
float: right;
background: #777;
padding: 4px 4px 0;
border-radius: 0px 0px 0px 4px;
-webkit-border-radius: 0px 0px 0px 4px;
box-shadow: 0 0 4px 0 #000000, 0 0 1px 0 #eeeeee inset;
overflow: hidden;
}
#main::after {
content: "";
clear: both;
display: block;
}
#wrap {
display: block;
position: relative;
margin: 0 auto;
}
#footer {
width: 100%;
height: 48px;
display: block;
position: relative;
text-align: right;
overflow: hidden;
padding: 48px 0 0;
}
#footer span {
padding: 0 24px;
}
h1 {
text-align: center;
font-size: 1.5em;
line-height: 1;
}
h3 {
font-size: 0.5em;
line-height: 1;
}
input,
textarea,
select,
button {
position: relative;
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
button,
input[type="number"],
.checkbox,
fieldset,
legend {
border-radius: 4px;
margin: 0;
padding: 0;
position: relative;
border: 0;
box-shadow: 0 0 1px 0 #333 inset;
vertical-align: baseline;
}
input[type="number"] {
-webkit-appearance: none;
margin: 0;
max-width: 36px;
padding: 0 0 0 4px;
color: inherit;
overflow: hidden;
font-size: 10px;
line-height: 2.4;
}
input,
fieldset,
textarea {
max-width: 350px;
}
textarea {
width: 100%;
font-family: "Lucida Console", Monaco, monospace;
color: inherit;
}
fieldset {
background: #aaa;
overflow: hidden;
margin: 0;
padding: 36px 12px 12px;
position: relative;
display: inline-grid;
gap: 4px;
align-content: baseline;
grid-template-columns: repeat(3, 1fr);
box-shadow: 0 0 4px 0 #000000, 0 0 1px 0 #eeeeee inset;
align-items: center;
}
fieldset #text {
grid-area: 3 / 1 / span 1 / span 3;
}
fieldset span {
white-space: nowrap;
position: relative;
overflow: hidden;
font-size: 0;
}
legend {
background-color: #eee;
position: absolute;
top: 0;
text-indent: 12px;
left: 0;
width: 100%;
}
label {
display: inline-block;
font-size: 10px;
line-height: 2.4;
padding: 0 4px;
vertical-align: bottom;
}
::-moz-selection {
background: #7bff00;
}
::selection {
background: #7bff00;
}
@-webkit-keyframes click-wave {
0% {
opacity: 0.7;
}
100% {
opacity: 0;
}
}
@-moz-keyframes click-wave {
0% {
opacity: 0.7;
}
100% {
opacity: 0;
}
}
@keyframes click-wave {
0% {
opacity: 0.7;
}
100% {
opacity: 0;
}
}
.checkbox {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
position: relative;
height: 24px;
width: 24px;
-webkit-transition: all 0.15s ease-out 0s;
-moz-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s;
background: #eee;
border: none;
cursor: pointer;
display: inline-block;
outline: none;
z-index: 1000;
font-size: 24px;
padding: 0;
margin: 0;
overflow: hidden;
}
.checkbox:checked {
background: #eee;
}
.checkbox:checked::before {
height: 24px;
width: 24px;
line-height: 24px;
position: absolute;
content: "\2716";
display: inline-block;
text-align: center;
}
.checkbox:checked::after {
-webkit-animation: click-wave 0.65s;
-moz-animation: click-wave 0.65s;
animation: click-wave 0.65s;
background: #000;
content: "";
display: block;
position: relative;
z-index: 100;
}
.checkbox:hover {
background: #fff;
}
button:focus {
outline: 0 !important;
}
button::-moz-focus-inner {
border: 0;
}
button {
padding: 0;
background: #309900;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #333;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: 2;
}
button:hover {
background: #777;
border: solid 1px #aaa;
text-decoration: none;
cursor: pointer;
}
button:active {
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
background: #333;
border: solid 1px #777;
}
.rgbs {
width: auto;
}
#information {
position: absolute;
top: 0;
left: 0;
text-indent: 12px;
background: rgba(119, 119, 119, 0.8);
box-shadow: 0 0 4px 0 #000000, 0 0 1px 0 #eeeeee inset;
width: 100%;
text-align: center;
color: #7bff00;
font-weight: 900;
overflow: hidden;
text-shadow: 0px 1px 0px #000000, 0px 2px 0px #000000,
0px 3px 0px #000000, 0px 4px 0px #000000, 0px 5px 0px #000000,
0px 7px 0px #000000, 0px 7px 0px #000000;
}
#examp {
max-width: 700px;
margin: 24px auto;
text-align: justify;
background: inherit;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: invert(1);
}
p {
display: inline-block;
padding: 0;
margin: 0;
}
pre {
display: inline;
margin: 0;
padding: 0;
}
JAVASCRIPT
(function() {
class Gradients {
constructor() {
if (!this instanceof Gradients) return new Gradients(); //if without new operator
let _main = null;
let _colorInterval = [];
let _gardiInterval = [];
this.setMain = main => (_main = main);
this.setColorIntervalValue = (r, g, b) =>
(this._colorInterval = [r, g, b] || [0, 0, 0]);
this.setGradienIntervalVal = first => {
this._gardiInterval = first || 0;
};
this.getColorIntervalValue = () => this._colorInterval;
this.getGradienIntervalVal = () => this._gardiInterval;
}
}
function mainFunc() {
let makeButton = document.getElementById("makeGrad");
makeButton.addEventListener("click", mainFunc);
let cBody = document.getElementsByTagName("body")[0];
let grad = new Gradients();
let main = grad.setMain(document.getElementById("main"));
let cop = document.getElementById("text");
let fixed = document.getElementById("fixed").checked;
let radial = document.getElementById("radial").checked;
let random = document.getElementById("random").checked;
var revers = document.getElementById("revers").checked;
let repatng = document.getElementById("repea").checked;
let softness = +document.getElementById("softness").value || 0;
let cDegree = +document.getElementById("degree").value || 0;
let cInterv = +document.getElementById("rgbinterv").value || 10;
let gInterv = +document.getElementById("grainterv").value || 10;
let baseline = +document.getElementById("baseline").value || 0;
let opaci = document.getElementById("opaci").value || 0;
let safe = +document.getElementById("safe").value || 100;
let r = +document.getElementById("r").value || 0;
let g = +document.getElementById("g").value || 0;
let b = +document.getElementById("b").value || 0;
let string = "";
let temp = 0;
let x = 0;
let tempColor = [];
let tempGradi = [];
colorIntervals();
gradiIntervals();
mkeString();
function colorIntervals() {
while (safe--) {
x++;
if (r >= 255 || g >= 255 || b >= 255) break;
r += random ? randoms(0, cInterv) : cInterv;
g += random ? randoms(0, cInterv) : cInterv;
b += random ? randoms(0, cInterv) : cInterv;
grad.setColorIntervalValue(r, g, b);
tempColor[tempColor.length] = grad.getColorIntervalValue();
}
}
function gradiIntervals() {
if (revers) {
baseline = false;
x *= 2;
tempColor = tempColor.concat(tempColor.slice(1, -1).reverse());
}
for (let i = 0; i < tempColor.length; i++) {
temp += gInterv;
if (baseline > 0 && i % 3 === 0) temp += baseline - 2;
grad.setGradienIntervalVal(temp);
tempGradi[tempGradi.length] = grad.getGradienIntervalVal();
}
temp = 0;
tempGradi = tempGradi.map((f, i) => {
let es = [];
[es[es.length], es[es.length]] = [f, temp];
temp = es[[es.length - 1] - 1];
temp += softness;
es.reverse();
return es;
});
}
function mkeString() {
let op = false;
string = tempColor.map((o, i, arr) => {
if (baseline > 0 && i % 3 === 0) {
o = "0, 0, 0";
revers = false;
op = true;
} else {
op = false;
}
return ` ${opaci > 0 ? "rgba" : "rgb"}(${o}${
opaci > 0 || op ? ",0." + opaci : ""
}) ${tempGradi[i].join("px ")}px`;
});
let type = repatng ? "repeating-" : "";
let genGrad = (cBody.style.background =
(radial
? `${type}radial-gradient(`
: `${type}linear-gradient(` + cDegree + "deg, ") +
string +
")" +
(fixed ? "fixed" : ""));
stats(x);
cop.innerText = "background:" + genGrad + ";";
}
}
document.getElementById("text").addEventListener("click", function(e) {
if (e.detail === 3) {
try {
var successful = document.execCommand("copy");
var msg = successful ? "successful" : "unsuccessful";
console.log("Copying text command was " + msg);
} catch (err) {
console.log("OopsOops, unable to copy");
}
}
});
function stats(x) {
document.getElementById("info").innerText = x;
}
function randoms(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
window.addEventListener("DOMContentLoaded", mainFunc);
})();
