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:
https://www.loom.com/share/824f73cf56c54bfdadcd8e3ff80fb161
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%
);
};
Amazing! Thank you!
Also, found this good resource for CSS easing (smooth) code generator: Easing Gradients
Just got to add “background:” for it to work…
Thanks again