Streaming live at 10am (PST)

Making CSS Gradients smooth

Looking to find a way to control how gradients render.

They are not smooth, a hard edge line is visible. Looking for a workaround that can be added to custom code to control gradients across the site (although currently I’m only using on backgrounds).

Here is a great explainer:

Thank you


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

If you’re just looking for a gradient from black to transparent with a smooth transition, just use the code they provided on a div in your project and make sure the class used in the code matches the code used in your project:

If you’re looking for a smooth transition between two different colors (or another color and transparent) you can use the editor here and generate some css to replace what was used above. Just note, the code needs to be taken from the second, longer, version shown on the page at the link. Example:

.your-class {
 linear-gradient(
  to bottom,
  hsl(330, 100%, 45.1%) 0%,
  hsl(331, 89.25%, 47.36%) 8.3%,
  hsl(330.53, 79.69%, 48.96%) 15.5%,
  hsl(328.56, 70.89%, 49.96%) 21.6%,
  hsl(324.94, 63.52%, 50.4%) 27%,
  hsl(319.21, 54.99%, 50.3%) 31.9%,
  hsl(310.39, 46.14%, 49.68%) 36.5%,
  hsl(296.53, 39.12%, 49.7%) 41%,
  hsl(280.63, 42.91%, 53.43%) 45.6%,
  hsl(265.14, 47.59%, 56.84%) 50.5%,
  hsl(250.13, 52.52%, 59.88%) 56.1%,
  hsl(235.88, 59.2%, 60.91%) 62.4%,
  hsl(225.81, 68.23%, 57.85%) 69.7%,
  hsl(218.93, 74.97%, 54.21%) 78.3%,
  hsl(213.89, 79.63%, 49.97%) 88.3%,
  hsl(210, 100%, 45.1%) 100%
 );
};
1 Like

Amazing! Thank you!

Also, found this good resource for CSS easing (smooth) code generator: https://larsenwork.com/easing-gradients/

Just got to add “background:” for it to work…

Thanks again