Hacker News new | comments | show | ask | jobs | submit login
Show HN: Egg Gradients – Gradient color inspirations (eggradients.com)
186 points by serhadiletir 8 months ago | hide | past | web | favorite | 76 comments

The webflow ads have piqued my interest. A lot of nice little projects are shown on Show HN but I don't know if I've ever seen any to feature any sort of sponsorship right off the bat. Pretty clever to throw that in there. Do you have any lessons learned to share about the process behind it? (If it came from an easy personal connection just to show proof of concept, that's cool too!)

Actually, I don't like it when advertising is mixed into/entangled with content. At the first glance, from the authors perspective, it sounds tricky because it is unobstructive and discrete, this kind of ad people might not want to block.

As a user, I feel manipulated. I don't trust the content any more which is not properly limited from the ads. My point is not even about adblockers or ads in general, it is just that I don't want to consume a text which does not even hide its intention to manipulate me.

However I admit that the flagging and placement of advertising is probably a matter of taste.

I think I get where you're coming from but

1. not sure what trust is required of you for content which is a gradient in the shape of an egg.

2. would you be more comfortable with ads that hid their intention to 'manipulate' you?

3. the word manipulate is pretty loaded, really they're pretty straightforward about trying to sell you something

Is this opinion only for web advertising?

Extending this to integrated advertising in movies - I'd rather see a character driving a Ford truck or drinking a can of coke than see an extra 15-30 seconds at the start of the movie watching an ad.

Thanks for the comment. I will design egg-ads more clearly. So we will try to solve this problem.

Also you've missed the changing the cursor (CSS) when you hover over the link.

Thanks for the feedback. In fact, they affiliate links. I put it to try the Egg-ads concept.

I also like the ads, nice job. Some tips:

You should increase the surface area of your <a> tags in the ads. Ideally they would cover the whole card and the egg, too. Also, consider adding a hover effect and a "pointer" cursor. I was trying to click your ads and I couldn't figure out how to!

Agreed that I was very confused in not seeing a pointer cursor on hovering _anywhere_ on the Ad card... any way this could have been made as a conscious decision to minimize the whole impression of the page being too invasive with its ads?

I added hover over shadow animation and working on adding External Link fon icon from fontawesome.com https://fontawesome.com/icons/external-link-alt?style=solid

Thanks for the feedback.

I really enjoyed that too, this is exactly how you do unobtrusive ads. I'd maybe put them on gradient backgrounds too, since the black disrupts the visual flow a bit.

I really love how well it blends in with the rest of the content. I noticed it right away but it's not distracting enough to be annoying. Nice work!

You could do a nice follow up hn blog post about the results of this experiment! Would get significant traction I imagine.

Maybe I’m missing something. But I don’t see any ads.

Most of the gradients are slight variations of magenta and turquoise.

All the websites go for that now. I see a lot of hipstery designer stuff with that look. Vaporwave / aesthetic whatever. It's all magenta and turquoise.

So dull.

Your names for the color combos are worse than urban decay eyeshadows.

Nice page, Seems very similar to https://webgradients.com

I would say a little too similar.

This website on my mobile browser is the most visually pleasing experience I've had today. Bravo.

Those are... unique names.

Thanks. It was the most time-consuming part of the project.

… and you should get an award for them!

however there are two 'bugs': Blank Printer Fat Cat

“Obama’s resignation”...?

Resignation obviously can mean resigned to, eg

"having accepted something unpleasant that one cannot do anything about"

Certainly, but I don't think that's the first interpretation of the word people think of when it's associated with the President.


Time well spent indeed.

Are they generated ?

* Jay-Z's Hyphen

* War Crime

* Tinder Photo

* Fear of Swedish

How about "Proactive Shower" ?

Very nice! Instantly made me think of that receptionist girl in Total Recall, Schwarzenegger version.

Edit, this: https://www.youtube.com/watch?v=in7QyUBV6Fk

I'd love if I could filter this by target color(s), and see a subset that approximate that selection. Being able to select "red to orange" or "blue to green" would be great! Even some approximation of hex codes would be cool too.

Thanks for the feedback. I am working extensively on the filter feature. Like this https://www.eggradients.com/category/red-orange-gradients

I will add it to the interface as soon as possible.

That's exactly what I was talking about. Nice work!

You mean eggsactly :)

welcome aboard https://prnt.sc/ixey41

Another http://uigradients.com/, but with some very, um, brogrammer-y naming decisions. I'm somewhat confused as to why this is on the front page.

It's on the front page because someone posted it to HN, and HN users decided it was interesting enough to vote it up.

I suppose I deserved that.

What I should have said, is that I'm a little disheartened that this is getting the attention that I would prefer go to a site like uigradients with better UX and a less divisive tone.

The solution to that is submit, upvote, and comment substantially on better articles and flag those you think are inappropriate. On balance, things should work out and improve. Help make HN the place you want it to be :)

I have noticed that, as HN becomes more popular, the "variety" of submissions making it to the top has definitely widened since my lurking years. I just chalk it up to a more diverse audience as time goes on. I'm not sure much can be done when the content is (for the most part) user curated.

Couldn't read them all, but I'm curious if there's a name referencing the company Stripe?

... These gradients always remind me of their website

actually does not exist. But it can be added. How about "Stripe Transaction" Not funny enough. I will think a little. Do you have a suggestion?

API is nowhere to be found in the names. So...

Stripe's API

It was one of the things that made them.

"Stripe copied us"

“Stripes and no stars” in reference to Stars and Stripes? Nah, “no stars” sounds negative.

“Stars and Stripe checkout”?

This is cool! One of the top comments on Indiehackers (if I remember correctly) was to click on an egg to change the background color - I'm gonna echo that here.

Love the "remember to bookmark" label!

Number nine is "Homeless Man's Joy". That's a great look for our community.

Which one is more? Homeless people or empty houses? I do not want to turn this into a sociological debate, but the color names include political jokes.

Ugh, yeah. There's a whole bunch of names that are incredibly shitty. Fuck this site.

hahah thanks

You should add a search bar at the top that will filter based on similar colors.

I usually know in general what color scheme I want when building something, but need to search online to find the exact colors that look good.

Thanks for the feedback. I'm currently working on filter like https://www.eggradients.com/category/purple-gradients I will add the homepage soon

Those names are really something. Love it.

If the name comes to mind, please share it.

“For magic consists in this, the true naming of a thing.” ― Ursula K. Le Guin, A Wizard of Earthsea

Sorry, I must be missing something. Is this is a page full of gradient fills on egg shaped circles, infused with ads, with completely random names?

Vote-rigging, perhaps?


Make that random names with an apparent alt-right flavor. Yay for the internet.

Uh, I wouldn’t say the names have a political alignment. They’re just a bit sardonic?

Cynicism doesn’t have an agenda, but some agendas are cynical.

Or is that how it works now? You have to think only happy thoughts, or someone polarizes your agenda for you?

Is there any easy way to share an egg? I showed this to my colleagues at work and was trying to share a particular egg, but couldn't spot anything clickable for this. Inspecting the HTML, it doesn't look like any of the eggs have ids on them that could be used as anchors.

I've seen variations on this dead-simple concept so many times I made my own two months ago:


It would be great if there was a button to set gradient as background for preview.

You're the second person to suggest this great idea. I got a note first when I heard it. I'm going to apply now. I have to :)

I second this. Came here to comment the same thing and figured I'd check if someone already had.

Love the website, exceptionally clean and well designed.

Like them a lot. A button to make the background #333 would be nice.

Many thanks, I will add that feature as soon as possible.

The alias cursor on the text seems a bit strange. Especially since clicking doesn't do anything.


I see plectrums! ;-)

nice project, love it! The copy in the hero is full of typos/english mistakes, FYI :)

Thank you for the warning. My English learning process is still going on. Somehow. I think it's time to buy Grammarly premium. :)

The eggs are oddly appealing!

they are really nice.

Why the egg shape?

because I learned to do egg shape in CSS. Ironically, I add all as SVG so that it's easier on CMS.

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact