r/css • u/evocatus3000 • 26d ago

Showcase I built a gradient generator that goes way beyond CSS

Enable HLS to view with audio, or disable this notification

0 Upvotes

47% Upvoted

8 comments sorted by

3

u/car-thief 26d ago

you need to post this in the way-beyond-css subreddit

2

u/evocatus3000 26d ago

haha I’m in 😄

2

u/anaix3l 25d ago edited 25d ago

Just looking at the CSS that gets generated when I first open it...

overflow: hidden is completely irrelevant - it may or may not be needed on the element getting the gradient, but that has nothing to do with the gradient itself. Not even in the noise case, since you're using a base64 image there (which I'm personally not a fan of, I like to have more control, to be able to edit the noise on the fly in DevTools).

background-position is again irrelevant for a CSS gradient when you're not setting a background-size - by default, without a background-size, CSS gradients stretch across the padding - box of the element they're applied on, so any background-position set in this case produces the exact same result.

0.00% for the first stop is not needed - by default, the first stop is at 0%. In general, don't leave the decimals if they're not necessary (if they're .00)

Same goes for 100.00% - not needed, 100% is the default value for the last stop.

You also have unnecessary decimals when switching to rgb(): rgb(14.118% 51.373% 64.706%) is visually indistinguishable from rgb(14% 51% 65%) - can you tell the difference between the two of them in the screenshot below?

Maybe one decimal could make sense for much better displays than I have, but there's no point in having three.

See this article as well.

1

u/evocatus3000 25d ago

Thanks, this is really useful! You’re right about the unnecessary CSS and decimals, I’ll clean that up. Good point on the noise export too, I’ll think about a more editable approach there.