How to make CSS gradient look smooth?

Question

How to make CSS gradient look smooth?

8.6k views Asked by Даниил Пронин At 24 November 2024 at 07:30

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:

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 on CodePen

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

Original Q&A

There are 2 answers

codingunicorn On 28 December 2016 at 08:56

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>

**Даниил Пронин** · Accepted Answer · 2018-02-05 12:04:04

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:

PostCSS plugin with 2 options: https://github.com/larsenwork/postcss-easing-gradients
An app allowng you to choose an easing function: https://larsenwork.com/easing-gradients/

TechQA.

How to make CSS gradient look smooth?

There are 2 answers

Related Questions in CSS

Related Questions in GRADIENT

Related Questions in LINEAR-GRADIENTS

Related Questions in SMOOTHING

Popular Questions

Popular Tags

Trending Questions