feb 26, 2023
🔗 A technique for generating beautiful color gradients
There is only one non-black-and-white piece in the whole UI which is the color gradient circle in the homepage and in the header of the posts. I thought adding a small piece of color would be a fun highlight given the whole website is set in neutral shades.
But I didn't want to commit to a specific brand color, also there are many nice color gradients! So I experimented with the idea to generate a new gradient every time the page is loaded. I remember I liked the gradients generated from this nice online gradient generator, by reading through the generated css I found out that a technique to generate nice looking gradients is to combine radial-gradient and linear-gradient.
background-image: radial-gradient(
100% 100% at 0% 50%,
#d53a42 19%,
rgba(204, 58, 78, 0.75) 39.25%,
rgba(194, 57, 86, 0.5) 59.5%,
rgba(177, 56, 94, 0) 100%
), linear-gradient(180deg, #ffffb5 0%, #fef372 7.33%, #f6d860 22%, #f3bf59
27.67%, #ed894b 39%, #e47346 45%, #d53a42 57%, #c93a51 63.33%, #b1385e 76%, #97385d
82%, #6a324f 94%);
The result from the css
# Generate the colors
The first step is to generate a pleasing palette of 4/5 colors for the linear-gradient, to achieve this I learned from the technique used in this repository meodai/farbvelo:
- it picks a series of color stops ℕ0 hues at a user defined minimum angle ∠ generated by the hsluv/hsluv library, a human-friendly alternative to HSL.
- it interpolates between color stops in CIE L*a*b* by using gka/chroma.js, a library for color manipulations.
I then pick a middle value in the color palette to generate the radial-gradient color stops. In gradient.js I do those steps and then export the result as a css string:
function setColors(array) {
let gradient = `radial-gradient(100% 100% at 0% 50%, ${array[2]} 19%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, ${array[0]}, ${array[1]}, ${array[2]}, ${array[3]}, ${array[4]}, ${array[5]})`;
document.querySelectorAll(".gradient").forEach((el) => {
el.style.background = gradient;
});
}# Let the user choose
With the gradient generator working, I really liked the outcomes, but I also wish any reader of this website could find their favorite gradient and have it persist across page loads. So I made the coloured circle in the homepage a clickable button that generates a new gradient and store the result in the browser localStorage.
Some nice gradients
background: radial-gradient(100% 100% at 0% 50%, rgb(118, 201, 193) 19%, rgba(0, 0, 0, 0) 100%), linear-gradient(rgb(62, 97, 102), rgb(100, 166, 177), rgb(118, 201, 193), rgb(128, 225, 191), rgb(136, 240, 187), rgb(145, 216, 178));
background: radial-gradient(100% 100% at 0% 50%, rgb(176, 208, 211) 19%, rgba(0, 0, 0, 0) 100%), linear-gradient(rgb(76, 108, 112), rgb(129, 188, 196), rgb(176, 208, 211), rgb(215, 208, 205), rgb(235, 206, 200), rgb(204, 198, 196));
background: radial-gradient(100% 100% at 0% 50%, rgb(202, 185, 195) 19%, rgba(0, 0, 0, 0) 100%), linear-gradient(rgb(123, 92, 110), rgb(218, 158, 195), rgb(202, 185, 195), rgb(146, 196, 170), rgb(99, 201, 150), rgb(141, 194, 149));