All geek questions in one place

How to make CSS gradient smooth?

I have a black background and you want to add a block inside with a simple CSS gradient from transparent to 0.7 white:

linear-gradient(to right, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.76) 14%, hsla(0, 0%, 100%, 0.76) )

But it looks bad:

enter image description here

The only way I found is to add additional color stops manually.

 background: linear-gradient( to right, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.05) 2%, hsla(0, 0%, 100%, 0.09) 3%, hsla(0, 0%, 100%, 0.2) 5%, hsla(0, 0%, 100%, 0.57) 11.5%, hsla(0, 0%, 100%, 0.69) 14%, hsla(0, 0%, 100%, 0.75) 16.5%, hsla(0, 0%, 100%, 0.76) 17.5%, hsla(0, 0%, 100%, 0.77) );

And it looks much better:

testimony

CodePen Demonstration

Is there an easier way to make the CSS gradient smoother when the color stops?

+6
source share
2 answers

Once, I hope we have this:

 linear-gradient( to top, hsla(330, 100%, 45%, 0), cubic-bezier(0.45, 0, 0.5, 0.5), hsla(330, 100%, 45%, 1) );

Bot, we have this:

0
source

I still do not quite understand what exactly you intend to do, but as I understand it, you would like to add a box on a black background with a gradient on the left side from transparent (so it's still black) to white with 0.7 transparency or # C2C2C2 . If this is what you would like to do, I would not use hsl (due to the basic color theory), but rather rgba.

Check it:

 <html> <head> <style> #blackbg { background-color: black; height: 300px; } #grad1 { height: 200px; background: linear-gradient(to right, rgba(255,0,0,0), rgba(255, 255, 255, 0.7)); } </style> </head> <body>

If this is not what you intended to do, or you still feel that you are stuck, feel free to ask me.

 <div id="blackbg"> <div id="grad1"></div> </div> </body> </html>
+1
source

Source: https://habr.com/ru/post/1013563/

More articles:


All Articles