CSS Gradient

A simple, colorful gradient generator

get it
#5 Product of the WeekMarch 08, 2018
+1

CSS Gradient is a free online tool that makes it dead simple to create fresh web gradients. But wait that’s not all! CSS Gradient has a collection of articles and tutorials to help you level up your gradient game whether it’s learning those sweet, trendy text gradients or you’re just trying to understand what the heck the gradient syntax means.

Reviews

 +5 reviews
  • Tie LoveThe Chief @ apage.io
    Pros: 

    Very simple to use.

    Cons: 

    More premade gradients please :)

    Super beautiful and clean user interface to make gradients. Really loved using this and the UI is designed to an immaculate level.

    Tie Love has used this product for one day.

Discussion

You need to become a Contributor to join the discussion - Find out how.
Moe AmayaMaker@moeamaya · Designer—Developer
Hola Product Hunt, and thanks for the hunt Mubs! Imagine a place where the color flows like wine where beautiful gradients instinctively flock like the salmon of Capistrano. A little place called Aspen…oops I mean CSS Gradient. So CSS Gradient (or CSSG as it’s known on the streets) is a happy little website and web tool that allows you to get creative with gradients. It's also chock-full of colorful content about gradients from technical articles to real life examples. My name is Moe—I’m a Mexican designer trained at MIT and based in San Francisco. I created CSSG because I figure it’d be nice to have something enjoyable to use while you designers are making those super fire UIs. Let me know what you think!
Kyle Gill@gill_kyle · Freelance Developer
@moeamaya This is awesome! Looks really slick, does exactly what it's advertised to do and the examples and tutorials are also nice. I also love the subscribe section, gave me a good laugh. I'd include Spotify's use of gradients to the example page if it were me, they'v got some awesome ones. (http://spotify.me/en)
Moe AmayaMaker@moeamaya · Designer—Developer
@gill_kyle Ah crap how did I forget Spotify, I use their app everyday 🤦‍♂️ Thanks Kyle, I'll add that one too!
Pedro J. Martínez@inthe0n · Love creating things.
Simple product, there're dozens of alternatives out there but... I love this one! Easy to use, great UI/UX and useful. Bookmarked!
Thomas WangPro@thomaswang · Co-founder, Yish
@inthe0n I bookmarked as well 😀 - nice work @moeamaya
Mubashar IqbalHunterPro@mubashariqbal · 2016 Maker of the Year. Indie Hacker.
Very cool web tool that makes creating CSS Gradients very easy! Tell us more Moe.
Alex BauerHiring@alexdbauer · Product Marketing — Branch.io
Really slick. Please consider adding support for ‘multi-source’ gradients! There are a bunch of good gradient generator tools out there, but the only one I’ve ever found that does this (and only to a very limited degree) is http://www.webcore-it.com/colorf...
Moe AmayaMaker@moeamaya · Designer—Developer
@alexdbauer Thanks Alex! So I debated this one for quite a while, because I thought it was useful. I even went as far as mocking it up: In the end after talking to a ton of designers, no one really does the multi-source gradients except for when they're doing patterns. So instead I just created a pattern page and linked to Lera Vou's work: https://cssgradient.io/blog/grad....
Alex BauerHiring@alexdbauer · Product Marketing — Branch.io
@moeamaya our designer at Branch loves them! Matching what he creates in Illustrator is always an adventure 😳. Please consider building this at some point! Perhaps no one uses these because they're so hard to make?
Julian Lozano@julianlozanoaz · Designer at Fishermen Labs.
This is so simple to use, nice one!