
Show HN: GradientMagic - jordanmarshall
https://www.gradientmagic.com/
======
jordanmarshall
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).

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

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

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

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

[https://html2canvas.hertzen.com/](https://html2canvas.hertzen.com/)

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

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

------
mindvirus
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/](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.

~~~
jordanmarshall
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?

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

------
Evan_Hellmuth
Common way to monetize sites like yours is ads via Carbon, eg
[https://colors.lol/](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”

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

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

------
lanecwagner
This is so sick! I just swapped out my background images on
[https://classroom.qvault.io/](https://classroom.qvault.io/) for some of these
gradients. Loads way faster AND looks better now. Thanks for sharing :)

------
monokai_nl
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](https://mybrandnewlogo.com/color-gradient-generator)

------
ctippett
My current go-to resource for gradients is
[https://uigradients.com](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.

~~~
jordanmarshall
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?

~~~
padmadevu
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/](https://devu.in/devops-certification-training-in-bangalore/)

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

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

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

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

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

------
blisseyGo
These are awesome! Will use this on my next project! Do these work on all
browsers? And how's the performance?

~~~
jordanmarshall
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).

------
isometric
Really cool! I have used it in my project.

------
ChrisMarshallNY
That's really nice! I bookmarked it.

Thanks for sharing it.

------
slig
Fantastic job, thanks for sharing!

