Show HN: GradientMagic

Hey HN! GradientMagic is a side project that I launched roughly a year ago. It’s a large gallery of unique CSS gradients. You can browse the different patterns and copy the CSS with a single click, no login required. CSS gradients are often preferable to images since they are usually much smaller and easier to manage.<p>I would love any feedback or improvement ideas, but my real question is this: is it worth my time to try and monetize it? I’ve considered two approaches: (1) selling premium content bundles (2) subscription based approach w&#x2F; access to premium content and advanced features. I like (1) because it would be easier to implement. I like (2) because there is more value I can offer through advanced tools.<p>For reference, I get about 100 visitors a day right now with almost no marketing and very few updates (lately).

As I opened this on my phone I thought that these would make a nice background image.<p>While I recognize that the whole premise is that CSS gradients are better suited than images for their intended purpose, I immediately looked to see if the website offered a way to render an image and download it. Or perhaps even turn off the UI and have a no chrome view so one could take a screenshot.<p>Perhaps this could be a monetization strategy, instant gratification download for $1 with low friction Apple&#x2F;Google Pay (perhaps watermark removal). I know this wasn’t anywhere near the intended purpose of your project, it is just what came to mind for something I might pay for when seeing it.

Beautiful! I&#x27;m going to use a few of these for my project.<p>For monetization - maybe start with ads and add a <a href="https:&#x2F;&#x2F;www.buymeacoffee.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.buymeacoffee.com&#x2F;</a> link or similar? I&#x27;m not convinced subscriptions would work, since I imagine that a lot of people need a gradient once and that&#x27;s it, but you can always ask people.<p>In terms of feature suggestions:<p>- I like the edit colors feature - but can you make it global? i.e. I have my colors in mind, and want to see with various gradients.<p>- Can you convert this to code for non-CSS apps? For example, Flutter has a LinearGradient class that it seems like most of these should translate to in a straightforward way.

Common way to monetize sites like yours is ads via Carbon, eg <a href="https:&#x2F;&#x2F;colors.lol&#x2F;" rel="nofollow">https:&#x2F;&#x2F;colors.lol&#x2F;</a><p>Another more lucrative but laborious way is to use this site as an ad for contract work. Just throw a banner on top “need custom design work for your next product launch? Contact me here”

This is so sick! I just swapped out my background images on <a href="https:&#x2F;&#x2F;classroom.qvault.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;classroom.qvault.io&#x2F;</a> for some of these gradients. Loads way faster AND looks better now. Thanks for sharing :)

Those gradients are nice, I like that they are more complex than linear gradients. If you’re looking for something simpler though, I also took a stab at CSS gradients here: <a href="https:&#x2F;&#x2F;mybrandnewlogo.com&#x2F;color-gradient-generator" rel="nofollow">https:&#x2F;&#x2F;mybrandnewlogo.com&#x2F;color-gradient-generator</a>

My current go-to resource for gradients is <a href="https:&#x2F;&#x2F;uigradients.com" rel="nofollow">https:&#x2F;&#x2F;uigradients.com</a>. One feature I&#x27;d personally appreciate is a programmatic interface for getting a list of gradients, it&#x27;s handy for generating dynamic backgrounds.

Great resource, thanks for making it!<p>One bit of feedback; it would be nice if there was a way to view the CSS within the site – and dynamically updated as you edit a gradient – instead of having to use the Copy CSS button and paste it somewhere to see it. Bonus points for nice formatting and comments.

Unfortunately Chrome doesn&#x27;t do antialiasing on these constant-interpolation gradients. The bug is less noticeable here with low-contrast color pairs, but leaves ugly diagonals when you use them for finer patterns.

Are not these much heavier than SVG image backgrounds? I tested by putting five backgrounds into my real web project and scroll does not seem smooth anymore.

I wonder how many people here remember Subtle Patterns. Eventually it was acquired by Toptal. Always interesting how times change.

These are awesome! Will use this on my next project! Do these work on all browsers? And how&#x27;s the performance?

Really cool! I have used it in my project.

That&#x27;s really nice! I bookmarked it.<p>Thanks for sharing it.

Fantastic job, thanks for sharing!