CODEWITHSUNDEEP
cssgradientlinear-gradientssmoothing
Даниил Пронин
Даниил Пронин

Reputation: 1306

How to make CSS gradient look smooth?

I have a black background and want to add a block inside with 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 this 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:

The comparsion demonstration

The comparsion demonstration on CodePen

Is there an easier way to make CSS gradient smooth on color stops?

Upvotes: 9

Views: 9336

Answers (2)

Даниил Пронин
Даниил Пронин

Reputation: 1306

One day, I hope, we've got 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 for now, we have this:

Upvotes: 3

codingunicorn
codingunicorn

Reputation: 11

I didn't fully understand yet what it is what you intend to do, but as far as I got it would you like to add a box on a black background with a gradient on the left side from transparent (so still black) to white with 0.7 transparency or #C2C2C2. If that's what you'd like to do, I'd not use hsl (because of basic color theory) but rather rgba.

Check this out: 

<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 wasn't what you intended to do or you still feel stuck with something, feel free to ask me back. 

<div id="blackbg">
<div id="grad1"></div>
</div>

</body>
</html>

Upvotes: 1

Related Questions