13 ms·

Show HN: GradientMagic

259 points by jordanmarshall 6y ago

jordanmarshall 6y ago
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).
- thnder 6y ago
  These are great good work!!
- nitrogen 6y ago
  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.
- unicodepepper 6y ago
  This is delightful. I appreciate you having made this.
kejaed 6y ago
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 6y ago
  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 6y ago
    FWIW html2canvas is pretty good for all html-screenshotty things. Might work here as well. https://html2canvas.hertzen.com/ https://html2canvas.hertzen.com/
    - perk 6y ago
      Come to think of it, CSS isn't its strongest side. No support for filters I think. Maybe worth checking it out anyway.
      - jordanmarshall 6y ago
        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_Capture_API/Using_Screen_Capture https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capt...
        perk 6y ago
        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 https://www.npmjs.com/package/image-screenshot
    - 6y ago
lanecwagner 6y ago
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 :)
Evan_Hellmuth 6y ago
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 6y ago
  I don’t understand the part about https://colors.lol/ https://colors.lol/ (viewing on mobile phone)
  - Evan_Hellmuth 6y ago
    An example of a similar site that monetizes with ads via carbon
mindvirus 6y ago
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.
- eddywebs 6y ago
  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.
- jordanmarshall 6y ago
  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?
  - TedDoesntTalk 6y ago
    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.
  - mindvirus 6y ago
    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.
ChrisMarshallNY 6y ago
That's really nice! I bookmarked it. Thanks for sharing it.
xingyzt 6y ago
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.
Cyphase 6y ago
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.
adontz 6y ago
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 6y ago
  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.
slig 6y ago
Fantastic job, thanks for sharing!
monokai_nl 6y ago
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
blisseyGo 6y ago
These are awesome! Will use this on my next project! Do these work on all browsers? And how's the performance?
- jordanmarshall 6y ago
  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).
ctippett 6y ago
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 6y ago
  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 6y ago
    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/
andrewmcwatters 6y ago
I wonder how many people here remember Subtle Patterns. Eventually it was acquired by Toptal. Always interesting how times change.
isometric 6y ago
Really cool! I have used it in my project.

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

thnder 6y ago
These are great good work!!
nitrogen 6y ago
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.
unicodepepper 6y ago
This is delightful. I appreciate you having made this.

kejaed 6y ago

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 6y ago
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 6y ago
  FWIW html2canvas is pretty good for all html-screenshotty things. Might work here as well. https://html2canvas.hertzen.com/ https://html2canvas.hertzen.com/
  - perk 6y ago
    Come to think of it, CSS isn't its strongest side. No support for filters I think. Maybe worth checking it out anyway.
    - jordanmarshall 6y ago
      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_Capture_API/Using_Screen_Capture https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capt...
      - perk 6y ago
        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 https://www.npmjs.com/package/image-screenshot
  - 6y ago

lanecwagner 6y ago

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 :)

Evan_Hellmuth 6y ago

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 6y ago
I don’t understand the part about https://colors.lol/ https://colors.lol/ (viewing on mobile phone)
- Evan_Hellmuth 6y ago
  An example of a similar site that monetizes with ads via carbon

mindvirus 6y ago

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.

eddywebs 6y ago
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.
jordanmarshall 6y ago
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?
- TedDoesntTalk 6y ago
  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.
- mindvirus 6y ago
  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.

ChrisMarshallNY 6y ago

That's really nice! I bookmarked it. Thanks for sharing it.

xingyzt 6y ago

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.

Cyphase 6y ago

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.

adontz 6y ago

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 6y ago
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.

slig 6y ago

Fantastic job, thanks for sharing!

monokai_nl 6y ago

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

blisseyGo 6y ago

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

jordanmarshall 6y ago
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).

ctippett 6y ago

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 6y ago
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 6y ago
  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/

andrewmcwatters 6y ago

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

isometric 6y ago

Really cool! I have used it in my project.