How do I make gradient smoother?
So I have 2 components: Gradient.tsx & Button.tsx. Code for both you cabn see at screenshots 1 & 2 accordingly.
They problem, however, is not there. On screenshot no.3 you can see Gradient.scss, which is initialized after the button is pressed.
The thing is, when you start animation, you can see a very sharp change in color, escpecially on the right side of the screen.
How do I change my gradient so that it starts smoothly?
P.S. the video of this you can also check below
5 Replies
Missclick, deleted screenshot no.3, here it is:
Adding more colors between the origin and end colors should smooth it out.
There are tools like this that can generate the gradient for you; this link is your 2-color gradient result: https://mycolor.space/gradient?ori=to+right&hex=%23CC0202&hex2=%2301052B&sub=1
ColorSpace - CSS Gradient Color Generator
Generate a nice color gradient. Just enter two colors and our tool generates a perfect color gradient and the fitting css code.
remember that there's a limit of how many colors you can have, and some branding can't be avoided
You might also be able to reduce the striping by using gradient interpolation as demonstrated by Kevin in a recent video https://www.youtube.com/shorts/_W6jFTcqyig
maybe playing with opacity helps too, as it forces to try to use more colors