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.

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/ 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.

For reference, I get about 100 visitors a day right now with almost no marketing and very few updates (lately).

Just one suggestion: showing the CSS inline would be helpful. Admittedly I only bounced around for like 30 seconds, but I didn't see a way to show CSS on the page.

This is delightful. I appreciate you having made this.

These are great good work!!

As I opened this on my phone I thought that these would make a nice background image.

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.

Perhaps this could be a monetization strategy, instant gratification download for $1 with low friction Apple/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.

Great idea! I've considered adding an option to download individual gradients as an image, but I haven't thought about that as the primary focus. Certainly the number of people interested in cool backgrounds is going to be much larger than the current audience of frontend web developers.

The cool thing is that the two target audiences aren't mutually exclusive. So long as I continue to build out the images in CSS, I can offer both image and CSS download options.

FWIW html2canvas is pretty good for all html-screenshotty things. Might work here as well.

https://html2canvas.hertzen.com/

Good as html2canvas is, these days you may get more milage creating an SVG, putting the HTML content in it as a ForeignObject, and then using the browser's ability to copy an image to a canvas with the SVG as the source. I use that technique in a very complex diagramming app I work on and it never seems to fail regardless of the HTML content. Getting fonts and external styles to work is fun but that wouldn't apply here.

Off-topic, but please tell us more about the diagramming app.

Come to think of it, CSS isn't its strongest side. No support for filters I think. Maybe worth checking it out anyway.

I looked into it before, and I don't think html2canvas would work. IIRC the only way to get the gradients was using the screen capture API [1], which works, but requires users to click an authorization prompt before use.

[1] https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capt...

Hm. I've used image-screenshot [1] in the past together with html2canvas to get CSS filter support in screenshots. Don't know if it would work in your scenario though.

[1] https://www.npmjs.com/package/image-screenshot

Beautiful! I'm going to use a few of these for my project.

For monetization - maybe start with ads and add a https://www.buymeacoffee.com/ link or similar? I'm not convinced subscriptions would work, since I imagine that a lot of people need a gradient once and that's it, but you can always ask people.

In terms of feature suggestions:

- 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.

- 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.

May I ask where you live? pixelarity.com has a hundred-or-so (I haven't counted) Bootstrap templates that save me time whenever somebody wants me to set up a small website (for free - I hate that), and for the $5/month or $20/year or whatever it is - it's worth it to me.

I've notice that a lot of people on HN don't want to pay $20/month (or whatever) for things that save them hours and hours of work. I don't understand this unless they don't make much per hour (and this is a global community - so that may be real!).

How would one go about pricing for a global community? I'm assuming that my laziness drives my willingness to pay $20/month for something that is essentially outside of my cone-of-expertise, and I find value in that, but others done? (I also value time over money - which I have learned is not universal).

OK. That was a meandering comment - I apologize. Thought?

In NYC. That's a fair point - thinking in terms of annual access makes more sense.

For me it's more adversion to subscriptions for things I use once. I'm always happy to pay for things I use, but if I subscribe for $10/month and forget I don't find out until years later that I spent $100s on a thing. That said for anything like these gradients, for $10-$15/year I wouldn't hesitate.

I have a little of that with O'Reilly Safari. (Currently) they only charge me $199/year, but are thinking to raising the price to $499. I'm thinking I would rather buy their books one-off.

But I buy a shit-ton of stuff at ~10/months (maybe $5, maybe $20), but if they jack their rates I will go one-off again.

I don't know if I am unique (and thank you for answering the question), at a certain level like JetBrains IDEs or Sublime or O'Reilly - I just pay it. It starts to wear on one over time....

Apple kills me. I tend to release things on Linux or Windows. Maybe Windows. But iOS - You have to have a Mac and a Development platform and subscription. I think they must hate developers. I would pay them for product sold - but can you at least make dev tools a little cheaper? I run into this issue in university dev-camp conversations a lot..

I second the idea of the being able to export for non web/css, these gradients are too good and could be used for graphic design as well. Also the idea of adding tip jar/non invasive monetization.

Yeah, thats my concern with subscriptions as well. I'm not sure many people would need to come back that often. Maybe more premium features (like what you highlight below) would work? Instead of just being a hub for gradients, it becomes your first stop anytime you need a cool image.

I'd be curious as to what other non-css formats would be helpful. You mention Flutter LinearGradient, are there others? SVG certainly, is there a way to make images export friendly for Sketch or Figma?

My two cents would be to stay focused - there are a ton of general image search resources online. unsplash.com for example seems hard to beat. One place to consider expanding to would be CSS animated gradients though.

In terms of generating code: - Android - iOS (objective-c + swift) - React Native - Flutter

seem like the most popular non-CSS based mobile frameworks.

I’d love to see these paired with css animations for subtle background changes between gradients.

Maybe that’s premium content. I’m not sure how useful it is to designers since I am not one.

Common way to monetize sites like yours is ads via Carbon, eg https://colors.lol/

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”

I don’t understand the part about https://colors.lol/ (viewing on mobile phone)

An example of a similar site that monetizes with ads via carbon

This is so sick! I just swapped out my background images on https://classroom.qvault.io/ 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: https://mybrandnewlogo.com/color-gradient-generator

My current go-to resource for gradients is https://uigradients.com. One feature I'd personally appreciate is a programmatic interface for getting a list of gradients, it's handy for generating dynamic backgrounds.

uigradients is really nice, although they only have linear gradients (which look really good). I created Gradient Magic to highlight the large variety of styles and patterns that are possible.

As far as an API goes, how would you organize the input/output for dynamic backgrounds? Maybe send a style and colors, and get a random gradient of that color?

Its Really Nice!!! Visit us for getting the certification in DevOps Training with low fees and Placement Guranteed.

https://devu.in/devops-certification-training-in-bangalore/

Great resource, thanks for making it!

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'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.

It depends on a number of factors. Some of the more complex gradients could certainly be larger than some of the SVGs you are using in terms of raw size, but I'm not sure that would affect scrolling. If you link me to your project I would be happy to take a look.

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's the performance?

They should work consistently on all modern browsers except IE. As far as performance, they should be "faster" than needing to download external images. In terms of page rendering performance, I'm not completely sure. They might take more rendering time, but I've never noticed it, and it's certainly going to be faster than download time for an image (even a small one).

Really cool! I have used it in my project.

That's really nice! I bookmarked it.

Thanks for sharing it.

Fantastic job, thanks for sharing!