gradients

.gitignore

@@ -8,4 +8,6 @@ yarn-error.log
 test/unit/coverage
 test/e2e/reports
 selenium-debug.log
-npm-debug.log
+npm-debug.log
+.env
+.next

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="https://www.dropbox.com/s/8e17cyl1xlg74e5/logo.svg?raw=1" width="180px">
+  <img src="https://www.dropbox.com/s/h6vdbd2ar3c8mw6/logo.png?dl=0&raw=1" width="240" />
 </p>
 
 <p align="center">
@@ -73,6 +73,8 @@ A few open source projects built with uiGradients
 - [helper-uigradient](https://github.com/helpers/helper-uigradient) - Handlebar helper for uiGradients
 - [Uigradients iOS Viewer](https://github.com/thexande/uiGradients-Viewer-iOS) - Open source iOS app for viewing gradients
 - [Potion](http://numberpicture.com/build) - React components for declaratively composing animated, interactive visualizations
+- [Randient](https://github.com/uias/Randient) - Randomised, radient gradients for iOS.
+- [RandomGradient](https://github.com/Gabriel-Denys/RandomGradient) - Radomised gradients via json api
 
 &nbsp;
 

gradients.json

@@ -1,8 +1,49 @@
 [
+    {
+        "name": "Omolon",
+        "colors": ["#091E3A", "#2F80ED", "#2D9EE0"]
+    },
+    {
+        "name": "Farhan",
+        "colors": ["#9400D3", "#4B0082"]
+    }, 
+    {
+        "name": "Purple",
+        "colors": ["#c84e89", "#F15F79"]
+    },
+    {
+        "name": "Ibtesam",
+        "colors": ["#00F5A0", "#00D9F5"]
+    },
+    {
+        "name": "Radioactive Heat",
+        "colors": ["#F7941E", "#72C6EF", "#00A651"]
+    }, 
+    {
+        "name": "The Sky And The Sea",
+        "colors": ["#F7941E", "#004E8F"]
+    },
+    {
+        "name": "From Ice To Fire",
+        "colors": ["#72C6EF", "#004E8F"]
+    },
+
+    {
+        "name": "Blue & Orange",
+        "colors": ["#FD8112", "#0085CA"]
+    },
+    {
+        "name": "Purple Dream",
+        "colors": ["#bf5ae0","#a811da"]
+    },
     {
         "name": "Blu",
         "colors": ["#00416A", "#E4E5E6"]
     },
+    {
+        "name": "Summer Breeze",
+        "colors": ["#fbed96", "#abecd6"]
+    },
     {
         "name": "Ver",
         "colors": ["#FFE000", "#799F0C"]
@@ -74,6 +115,10 @@
     {
         "name": "Sel",
         "colors": ["#00467F", "#A5CC82"]
+    }, 
+    {
+        "name": "Afternoon",
+        "colors": ["#000C40", "#607D8B"]
     },
     {
         "name": "Skyline",
@@ -1318,7 +1363,7 @@
     },
     {
         "name": "JShine",
-        "colors": ["#12c2e9","#c471ed","#f64f59"]
+        "colors": ["#12c2e9", "#c471ed", "#f64f59"]
     },
     {
         "name": "Moonlit Asteroid",
@@ -1330,14 +1375,162 @@
     },
     {
         "name": "Cool Blues",
-        "colors": ["#2193b0","#6dd5ed"]
+        "colors": ["#2193b0", "#6dd5ed"]
     },
     { 
         "name": "Piggy Pink",
-        "colors": ["#ee9ca7","#ffdde1"]
+        "colors": ["#ee9ca7", "#ffdde1"]
     },
     {
         "name": "Grade Grey",
         "colors": ["#bdc3c7","#2c3e50"]
+    },
+    {
+      "name": "Telko",
+      "colors": ["#F36222", "#5CB644", "#007FC3"]
+    },
+    {
+        "name": "Zenta",
+        "colors": ["#2A2D3E","#FECB6E"]
+    },
+    {
+        "name": "Electric Peacock",
+        "colors": ["#8a2be2","#0000cd","#228b22","#ccff00"]
+    },
+    {
+        "name": "Under Blue Green",
+        "colors": ["#051937","#004d7a","#008793","#00bf72","#a8eb12"]
+    },
+    {
+        "name": "Lensod",
+        "colors": ["#6025F5","#FF5555"]
+    },
+    {
+        "name": "Newspaper",
+        "colors": ["#8a2be2","#ffa500","#f8f8ff"]
+    },
+    {
+      "name": "Dark Blue Gradient",
+      "colors": ["#2774ae", "#002E5D", "#002E5D"]
+    },
+    {
+        "name": "Dark Blu Two",
+        "colors": ["#004680","#4484BA"]
+    },
+    {
+        "name": "Lemon Lime",
+        "colors":["#7ec6bc","#ebe717"]
+    },
+    {
+        "name": "Beleko",
+        "colors": ["#ff1e56", "#f9c942", "#1e90ff"]
+    },
+    {
+        "name": "Mango Papaya",
+        "colors": ["#de8a41","#2ada53"]
+    },
+    {
+        "name": "Unicorn Rainbow",
+        "colors": ["#f7f0ac","#acf7f0","#f0acf7"]
+    },
+    {
+      "name": "Flame",
+      "colors": ["#ff0000", "#fdcf58"]
+    },
+    {
+        "name": "Blue Red",
+        "colors": ["#36B1C7", "#960B33"]
+    },
+    {
+        "name" : "Twitter",
+        "colors" : ["#1DA1F2", "#009ffc"]
+    },
+    {
+        "name": "Blooze",
+        "colors": ["#6da6be", "#4b859e", "#6da6be"]
+    },
+    {
+        "name": "Blue Slate",
+        "colors": ["#B5B9FF", "#2B2C49"]
+    },
+    {
+        "name": "Space Light Green",
+        "colors": ["#9FA0A8", "#5C7852"]
+    },
+    {
+        "name": "Flower",
+        "colors": ["#DCFFBD", "#CC86D1"]
+    },
+    {
+        "name": "Elate The Euge",
+        "colors": ["#8BDEDA", "43ADD0", "998EE0", "E17DC2", "EF9393"]
+    },
+    {
+        "name": "Peach Sea",
+        "colors": ["#E6AE8C", "#A8CECF"]
+    },
+    {
+        "name": "Abbas",
+        "colors": ["#00fff0","#0083fe"]
+    },
+    {
+        "name": "Winter Woods",
+        "colors": ["#333333", "#a2ab58", "#A43931"]
+    },
+    {
+        "name": "Ameena",
+        "colors": ["#0c0c6d", "#de512b", "#98d0c1", "#5bb226", "#023c0d"]
+    },
+    {
+        "name": "Emerald Sea",
+        "colors": ["#05386b","#5cdb95"]
+    },
+    {
+        "name": "Bleem",
+        "colors": ["#4284DB", "#29EAC4"]
+    },
+    {
+        "name": "Coffee Gold",
+        "colors": ["#554023", "#c99846"]
+    },
+    {
+        "name": "Compass",
+        "colors": ["#516b8b", "#056b3b"]
+    },
+    {
+        "name": "Andreuzza's",
+        "colors": ["#D70652", "#FF025E"]
+    },
+    {
+        "name": "Moonwalker",
+        "colors": ["#152331", "#000000"]
+    },
+    {
+        "name": "Whinehouse",
+        "colors": ["#f7f7f7", "#b9a0a0", "#794747", "#4e2020", "#111111"]
+    },
+    {
+        "name": "Hyper Blue",
+        "colors": ["#59CDE9", "#0A2A88"]
+    },
+    {
+        "name": "Racker",
+        "colors": ["#EB0000","#95008A","#3300FC"]
+    },
+    {
+        "name": "After the Rain",
+        "colors": ["#ff75c3", "#ffa647", "#ffe83f", "#9fff5b", "#70e2ff", "#cd93ff"]
+    },
+    {
+        "name": "Neon Green",
+        "colors": ["#81ff8a", "#64965e"]
+    },
+    {
+        "name": "Dusty Grass",
+        "colors": ["#d4fc79", "#96e6a1"]
+    },
+    {
+        "name": "Visual Blue",
+        "colors": ["#003d4d", "#00c996"]
     }
 ]

index.html

@@ -21,13 +21,13 @@
     <meta property="og:url" content="http://uigradients.com"/>
     <meta property="og:title" content="uiGradients - Beautiful colored gradients"/>
     <meta property="og:description" content="uiGradients is a handpicked collection of beautiful color gradients for designers and developers." />
-    <meta property="og:image" content="http://uigradients.com/static/images/uigradients.jpg"/>
+    <meta property="og:image" content="https://uigradients.com/static/images/uigradients.jpg"/>
 
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:creator" content="@_ighosh">
     <meta name="twitter:title" content="Handpicked beautiful color gradients">
     <meta name="twitter:description" content="uiGradients is a handpicked collection of beautiful color gradients for designers and developers.">
-    <meta name="twitter:image" content="http://uigradients.com/static/images/uigradients.jpg">
+    <meta name="twitter:image" content="https://uigradients.com/static/images/uigradients.jpg">
     <meta name="twitter:image:width" content="1200">
     <meta name="twitter:image:height" content="630">
 

src/components/modals/CodeModal.vue

@@ -13,8 +13,8 @@
 
 <pre class="codeblock" v-else><code>
   <span class="codeblock__property">background</span>: <span class="codeblock__spec">{{ this.gradient.colors[0] | lowercase }}</span>; <span class="codeblock__comment">/* fallback for old browsers */</span>
-  <span class="codeblock__property">background</span>: -webkit-linear-gradient({{ this.direction }}, <span class="codeblock__spec">{{ [...this.gradient.colors].join(', ') | lowercase }}</span>); <span class="codeblock__comment">/* Chrome 10-25, Safari 5.1-6 */</span>
-  <span class="codeblock__property">background</span>: linear-gradient({{ this.direction }}, <span class="codeblock__spec">{{ [...this.gradient.colors].join(', ') | lowercase }}</span>); <span class="codeblock__comment">/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */</span>
+  <span class="codeblock__property">background</span>: -webkit-linear-gradient({{ this.direction }}, <span class="codeblock__spec">{{ [...this.gradient.colors].reverse().join(', ') | lowercase }}</span>); <span class="codeblock__comment">/* Chrome 10-25, Safari 5.1-6 */</span>
+  <span class="codeblock__property">background</span>: linear-gradient({{ this.direction }}, <span class="codeblock__spec">{{ [...this.gradient.colors].reverse().join(', ') | lowercase }}</span>); <span class="codeblock__comment">/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */</span>
 </code></pre>
 
 </div>