Tag Archives: gradients

Multi-line gradient links

Zell Liew deconstructed and recreated the gradient links as seen on CSS-Tricks When I saw the CSS Tricks redesign, I was hooked. I loved the links with gradients. I told myself Iā€™m going to use gradient links for my next project. The result looks like this: Uses the aforementioned box-decoration-break to span styles across multiple […]

Grade.js

This JavaScript library produces complementary gradients generated from the top 2 dominant colours in supplied images. Apply the Grade function to elements wrapping the source images: <script src="path/to/grade.js"></script> <script type="text/javascript"> window.addEventListener('load', function(){ Grade(document.querySelectorAll('.gradient-wrap')) }) </script> ā€¦ <div class="gradient-wrap"> <img src="./samples/finding-dory.jpg" alt="" /> </div> Installation possible with npm: npm install grade-js Grade.js →Grade Source (GitHub) →