diff --git a/README.md b/README.md
index 5dcf055..6bc7cea 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,3 @@
# gradient_container
✨Explore a constantly updated library of gradients, curated by the community
+
diff --git a/constants/gradientCard.js b/constants/gradientCard.js
index a20d53a..1749ec3 100644
--- a/constants/gradientCard.js
+++ b/constants/gradientCard.js
@@ -1,208 +1,209 @@
+// let autoId = 0; this variable value comes from meshgradientcard.js
let gradientCards = [{
- id: 1,
+ id: ++autoId,
colors: ['#6d28d9', '#db2777'],
gradientColor: 'linear-gradient(to right, #6d28d9, #db2777)',
gradientName: 'daring new color monster',
gradientMaker: 'ShyamTala'
},
{
- id: 2,
+ id: ++autoId,
colors: ['#f12711', '#f5af19'],
gradientColor: 'linear-gradient(to right, #f12711,#f5af19)',
gradientName: 'flare',
gradientMaker: 'ShyamTala'
},
{
- id: 3,
+ id: ++autoId,
colors: ['#12c2e9', '#c471ed', '#f64f59'],
gradientColor: 'linear-gradient(to right, #12c2e9,#c471ed,#f64f59)',
gradientName: 'jshine',
gradientMaker: 'ShyamTala'
},
{
- id: 4,
+ id: ++autoId,
colors: ['#00b09b', '#96c93d'],
gradientColor: 'linear-gradient(to right, #00b09b, #96c93d)',
gradientName: 'ohhappiness',
gradientMaker: 'ShyamTala'
},
{
- id: 5,
+ id: ++autoId,
colors: ['#c0392b', '#8e44ad'],
gradientColor: 'linear-gradient(to right, #c0392b, #8e44ad)',
gradientName: 'mello',
gradientMaker: 'ShyamTala'
},
{
- id: 6,
+ id: ++autoId,
colors: ['#ad8cea', '#50dfb2'],
gradientColor: 'linear-gradient(to right, #ad8cea, #50dfb2)',
gradientName: 'emeald',
gradientMaker: 'ShyamTala'
},
{
- id: 7,
+ id: ++autoId,
colors: ['#f9e7fe', '#dafcfc'],
gradientColor: 'linear-gradient(to right, #f9e7fe, #dafcfc)',
gradientName: 'almost',
gradientMaker: 'ShyamTala'
},
{
- id: 8,
+ id: ++autoId,
colors: ['#6a11cb', '#fc6767'],
gradientColor: 'linear-gradient(to right, #6a11cb, #fc6767)',
gradientName: 'galaxy',
gradientMaker: 'ShyamTala'
},
{
- id: 9,
+ id: ++autoId,
colors: ['#ff1f01', '#ffc700'],
gradientColor: 'linear-gradient(to right, #ff1f01, #ffc700)',
gradientName: 'sol',
gradientMaker: 'ShyamTala'
},
{
- id: 10,
+ id: ++autoId,
colors: ['#d0dae0', '#8a2eff'],
gradientColor: 'linear-gradient(to right, #d0dae0, #8a2eff)',
gradientName: 'mikyway',
gradientMaker: 'ShyamTala'
},
{
- id: 11,
+ id: ++autoId,
colors: ['#e3d2c4', '#fcfcfb'],
gradientColor: 'linear-gradient(to right, #e3d2c4, #fcfcfb)',
gradientName: 'gold dust',
gradientMaker: 'ShyamTala'
},
{
- id: 12,
+ id: ++autoId,
colors: ['#1e130c', '#9a8478'],
gradientColor: 'linear-gradient(to right, #1e130c, #9a8478)',
gradientName: 'coffee',
gradientMaker: 'ShyamTala'
},
{
- id: 13,
+ id: ++autoId,
colors: ['#1a2980', '#26d0ce'],
gradientColor: 'linear-gradient(to right, #1a2980, #26d0ce)',
gradientName: 'aqua',
gradientMaker: 'ShyamTala'
},
{
- id: 14,
+ id: ++autoId,
colors: ['#4158D0', '#C850C0', 'FFCC70'],
gradientColor: 'linear-gradient(43deg, #4158D0,#C850C0,#FFCC70)',
gradientName: 'smesh',
gradientMaker: 'ShyamTala'
},
{
- id: 15,
+ id: ++autoId,
colors: ['#00DBDE', '#FC00FF'],
gradientColor: 'linear-gradient(90deg, #00DBDE, #FC00FF)',
gradientName: 'smoothy',
gradientMaker: 'ShyamTala'
},
{
- id: 16,
+ id: ++autoId,
colors: ['#3a6186', '#89253e'],
gradientColor: 'linear-gradient(90deg, #3a6186, #89253e)',
gradientName: 'love couple',
gradientMaker: 'ShyamTala'
},
{
- id: 17,
+ id: ++autoId,
colors: ['#FD297A', '#9424F0'],
gradientColor: 'linear-gradient(90deg, #FD297A, #9424F0)',
gradientName: 'cripy',
gradientMaker: 'ShyamTala'
},
{
- id: 18,
+ id: ++autoId,
colors: ['#FED54A', '#FF9347'],
gradientColor: 'linear-gradient(90deg, #FED54A, #FF9347)',
gradientName: 'sunset',
gradientMaker: 'ShyamTala'
},
{
- id: 19,
+ id: ++autoId,
colors: ['#70e1f5', '#ffd194'],
gradientColor: 'linear-gradient(90deg, #70e1f5, #ffd194)',
gradientName: 'shore',
gradientMaker: 'ShyamTala'
},
{
- id: 20,
+ id: ++autoId,
colors: ['#00c6ff', '#0072ff'],
gradientColor: 'linear-gradient(90deg, #00c6ff, #0072ff)',
gradientName: 'Facebook Messenger',
gradientMaker: 'ShyamTala'
},
{
- id: 21,
+ id: ++autoId,
colors: ['#d38312', '#a83279'],
gradientColor: 'linear-gradient(90deg, #d38312, #a83279)',
gradientName: 'Crazy Orange!',
gradientMaker: 'ShyamTala'
},
{
- id: 22,
+ id: ++autoId,
colors: ['#43cea2', '#185a9d'],
gradientColor: 'linear-gradient(90deg, #43cea2, #185a9d)',
gradientName: 'Endless river!',
gradientMaker: 'ShyamTala'
},
{
- id: 23,
+ id: ++autoId,
colors: ['#ffb347', '#ffcc33'],
gradientColor: 'linear-gradient(90deg, #ffb347, #ffcc33)',
gradientName: 'Crazy Orange!',
gradientMaker: 'ShyamTala'
},
{
- id: 24,
- colors: ['#FEAC5E', '#C779D0','#4BC0C8'],
+ id: ++autoId,
+ colors: ['#FEAC5E', '#C779D0', '#4BC0C8'],
gradientColor: 'linear-gradient(90deg,#FEAC5E, #C779D0, #4BC0C8)',
gradientName: 'Atlas!',
gradientMaker: 'ShyamTala'
},
{
- id: 25,
+ id: ++autoId,
colors: ['#7b4397', '#dc2430'],
gradientColor: 'linear-gradient(90deg,#7b4397, #dc2430)',
gradientName: 'virgin america',
gradientMaker: 'ShyamTala'
},
{
- id: 26,
+ id: ++autoId,
colors: ['#fc00ff', '#00dbde'],
gradientColor: 'linear-gradient(90deg,#fc00ff, #00dbde)',
gradientName: 'timber',
gradientMaker: 'ShyamTala'
},
{
- id: 27,
+ id: ++autoId,
colors: ['#f46b45', '#eea849'],
gradientColor: 'linear-gradient(90deg,#f46b45, #eea849)',
gradientName: 'master card',
gradientMaker: 'ShyamTala'
},
{
- id: 28,
+ id: ++autoId,
colors: ['#00C9FF', '#92FE9D'],
gradientColor: 'linear-gradient(90deg,#00C9FF, #92FE9D)',
gradientName: 'back to earth',
gradientMaker: 'ShyamTala'
},
{
- id: 29,
+ id: ++autoId,
colors: ['#fd746c', '#ff9068'],
gradientColor: 'linear-gradient(90deg,#fd746c, #ff9068)',
gradientName: 'haikus',
gradientMaker: 'ShyamTala'
},
{
- id: 30,
+ id: ++autoId,
colors: ['#3434e6', '#ec6ead'],
gradientColor: 'linear-gradient(90deg,#3434e6, #ec6ead)',
gradientName: 'vice city',
@@ -211,13 +212,13 @@ let gradientCards = [{
];
-let gradientContaier = document.querySelector('.gradient_container');
+let gradientContaier1 = document.querySelector('.gradient_container');
gradientCards.forEach((element) => {
let gradientCard = document.createElement("div");
gradientCard.classList.add('gradient_card');
- gradientCard.setAttribute("style", `background:${element.gradientColor}`);
+ gradientCard.setAttribute("style", `background-image:${element.gradientColor}`);
let gradientInfo = document.createElement('div');
gradientInfo.classList.add('gradient_info');
@@ -263,6 +264,6 @@ gradientCards.forEach((element) => {
gradientCard.append(gradientInfo);
- gradientContaier.append(gradientCard);
+ gradientContaier1.append(gradientCard);
})
\ No newline at end of file
diff --git a/constants/meshGradientCard.js b/constants/meshGradientCard.js
new file mode 100644
index 0000000..481e8e9
--- /dev/null
+++ b/constants/meshGradientCard.js
@@ -0,0 +1,155 @@
+let autoId = 0;
+let meshGradientCards = [{
+ id: ++autoId,
+ colors: ['#aeffbe', '#94fff1', '#ffe48a', '#ff9ebe'],
+ backgroundColor: '#b3ff99',
+ gradientColor: `radial-gradient(at 43% 0%, hsla(97,75%,68%,1) 0px, transparent 50%),
+ radial-gradient(at 100% 1%, hsla(176,100%,79%,1) 0px, transparent 50%),
+ radial-gradient(at 14% 99%, hsla(50,100%,77%,1) 0px, transparent 50%),
+ radial-gradient(at 100% 98%, hsla(344,100%,80%,1) 0px, transparent 50%)`,
+ gradientName: 'mesh gradient',
+ gradientMaker: 'ShyamTala'
+ },
+ {
+ id: ++autoId,
+ colors: ['#ac9dff', '#9384ff', '#ff93c4', '#ff80cd'],
+ gradientColor: `radial-gradient(at 100% 0%, hsla(249,100%,80%,1) 0px, transparent 50%),
+ radial-gradient(at 9% 89%, hsla(247,100%,75%,1) 0px, transparent 50%),
+ radial-gradient(at 99% 98%, hsla(332,100%,78%,1) 0px, transparent 50%),
+ radial-gradient(at 0% 0%, hsla(323,100%,75%,1) 0px, transparent 50%)`,
+ backgroundColor: '#b3ff99',
+ gradientName: 'killer mesh gradie',
+ gradientMaker: 'ShyamTala'
+ },
+ {
+ id: ++autoId,
+ colors: ['#ff8fcd', '#c6fcfe', '#95f3ff', '#b8ffbb'],
+ gradientColor: `radial-gradient(at 100% 100%, hsla(326,100%,78%,0.73) 0px, transparent 50%),
+ radial-gradient(at 100% 0%, hsla(182,100%,88%,1) 0px, transparent 50%),
+ radial-gradient(at 0% 99%, hsla(186,100%,79%,1) 0px, transparent 50%),
+ radial-gradient(at 1% 0%, hsla(122,100%,86%,1) 0px, transparent 50%)`,
+ backgroundColor: '#b3ff99',
+ gradientName: 'smoothy mesh gradient',
+ gradientMaker: 'ShyamTala'
+ },
+ {
+ id: ++autoId,
+ colors: ['#9bffe1', '#a8c5ff', '#ccedff', '#cbbcfc'],
+ gradientColor: `radial-gradient(at 100% 0%, hsla(162,100%,80%,1) 0px, transparent 50%),
+ radial-gradient(at 9% 89%, hsla(219,100%,82%,1) 0px, transparent 50%),
+ radial-gradient(at 99% 98%, hsla(201,100%,90%,1) 0px, transparent 50%),
+ radial-gradient(at 0% 0%, hsla(254,91%,86%,1) 0px, transparent 50%)`,
+ backgroundColor: '#b3ff99',
+ gradientName: 'staunch mesh gradie',
+ gradientMaker: 'ShyamTala'
+ },
+ {
+ id: ++autoId,
+ colors: ['#f2ffa3', '#deffa8', '#ff99da', '#affefb'],
+ gradientColor: `radial-gradient(at 0% 0%, hsla(68,97%,83%,1) 0px, transparent 50%),
+ radial-gradient(at 100% 0%, hsla(82,100%,82%,1) 0px, transparent 50%),
+ radial-gradient(at 0% 99%, hsla(321,100%,80%,1) 0px, transparent 50%),
+ radial-gradient(at 99% 98%, hsla(177,97%,84%,1) 0px, transparent 50%)`,
+ backgroundColor: '#b3ff99',
+ gradientName: 'mesh gradient',
+ gradientMaker: 'ShyamTala'
+ },
+ {
+ id: ++autoId,
+ colors: ['#da99fd', '#fffd90', '#9b96f9', '#ffa694'],
+ gradientColor: `radial-gradient(at 0% 0%, hsla(279,96%,79%,1) 0px, transparent 50%),
+ radial-gradient(at 100% 0%, hsla(58,100%,78%,1) 0px, transparent 50%),
+ radial-gradient(at 9% 89%, hsla(243,89%,78%,1) 0px, transparent 50%),
+ radial-gradient(at 99% 98%, hsla(10,100%,79%,1) 0px, transparent 50%)`,
+ backgroundColor: '#b3ff99',
+ gradientName: 'sun-shine mesh gradie',
+ gradientMaker: 'ShyamTala'
+ },
+ {
+ id: ++autoId,
+ colors: ['#ccbeff', '#c8f9fe', '#8d85ff', '#ffbec6'],
+ gradientColor: `radial-gradient(at 0% 0%, hsla(252,100%,87%,1) 0px, transparent 50%),
+ radial-gradient(at 100% 0%, hsla(185,96%,89%,1) 0px, transparent 50%),
+ radial-gradient(at 9% 89%, hsla(243,100%,76%,1) 0px, transparent 50%),
+ radial-gradient(at 99% 98%, hsla(352,100%,87%,1) 0px, transparent 50%)`,
+ backgroundColor: '#b3ff99',
+ gradientName: 'beautiful mesh gradie',
+ gradientMaker: 'ShyamTala'
+ },
+ {
+ id: ++autoId,
+ colors: ['#f9bcff', '#98efff', '#ffa29a', '#be99ff'],
+ gradientColor: `radial-gradient(at 0% 0%, hsla(294,100%,86%,1) 0px, transparent 50%),
+ radial-gradient(at 100% 0%, hsla(189,100%,79%,1) 0px, transparent 50%),
+ radial-gradient(at 9% 89%, hsla(4,100%,80%,1) 0px, transparent 50%),
+ radial-gradient(at 99% 98%, hsla(261,100%,80%,1) 0px, transparent 50%)`,
+ backgroundColor: '#b3ff99',
+ gradientName: 'radial mesh gradie',
+ gradientMaker: 'ShyamTala'
+ },
+
+
+
+];
+
+
+let gradientContaier = document.querySelector('.gradient_container');
+
+meshGradientCards.forEach((element) => {
+
+ let gradientCard = document.createElement("div");
+ gradientCard.classList.add('gradient_card');
+ gradientCard.setAttribute("style", `background:${element.backgroundColor};background-image:${element.gradientColor}`);
+
+ let gradientCanvas = document.createElement('div');
+ gradientCanvas.classList.add("gradient_canvas");
+ gradientCanvas.setAttribute("style", `height: 75%;background:${element.backgroundColor};background-image:${element.gradientColor}`);
+
+ let gradientInfo = document.createElement('div');
+ gradientInfo.classList.add('gradient_info');
+
+ let colors = document.createElement("div");
+ colors.classList.add("colors");
+
+
+ element.colors.forEach((color) => {
+ let colorInput = document.createElement('input');
+ colorInput.classList.add("color")
+ colorInput.setAttribute("type", "color");
+ colorInput.setAttribute("value", color)
+ colors.append(colorInput)
+ })
+
+ let titleWithCopyBtn = document.createElement('div');
+ titleWithCopyBtn.classList.add("title_with_copy_btn");
+
+ let gradientTitle = document.createElement('h1');
+ gradientTitle.classList.add('gradient_title');
+ gradientTitle.textContent = element.gradientName;
+ gradientTitle.setAttribute("style", `background:${element.backgroundColor};background-image:${element.gradientColor};-webkit-background-clip: text;
+ -webkit-text-fill-color: rgba(0,0,0,.2);`);
+
+ let coptToClipBoard = document.createElement('button');
+ coptToClipBoard.classList.add('copy_to_clipboard');
+ coptToClipBoard.setAttribute("data-clipboard-text", `background:${element.backgroundColor};\nbackground-image:${element.gradientColor};`)
+ coptToClipBoard.innerHTML = `