Nice demo by Adam Argyle to create a 4 Corner Gradient in CSS: Even though working with gradients has gotten some improvements, you’ll still need a trick to achieve this one: stack 2 simple linear gradients and use a linear mask to blend them together: mask-image: linear-gradient(to bottom, transparent, black);
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) →