Gradients in CSS
I love colors. Whenever I have a chance to use colors, I do. At the risk of it looking kitsch, I like quite much color gradients because of the many colors they include.
Although nowadays the preference goes towards minimalism and color “exhuberance” is mostly frowned upon, it seems there has been a resurgence of gradients in Web pages. There are nice tools that help both with the choice of colors and with translating that into CSS properties, for example:
background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
When it comes to Web design, though, choosing the right colors is not just a matter of taste but also of usability. Is using many colors too distracting? Does it make it difficult to read the text? Is it annoying?
A tool I find useful for this is the Contrast Checker, which returns a score on the contrast between a background color and a foreground color. With a gradient, this check is more complex because of the “changing” nature of the background.
I am still on a quest to figure out the best way to make gradient, font, and text color to work beautifully together.