Different use for CSS gradients

Raja Krishna — Fri, 24 May 2019 16:59:43 +0000

Recently i was working on a small project of making a digital clock chrome extension. I wanted to keep the design as minimal as possible and also reduce the size of the extension. So instead of regular BORING backgrounds, i tried to use CSS gradients to see if i could come up with something.

Tried every possible way and the gradients were bad. So as a last resort i googled to see if i could have a multi-colored CSS gradient without actually having a transition from color to color. Then i stumbled upon this post:
https://blog.prototypr.io/css-only-multi-color-backgrounds-4d96a5569a20

The simple logic here is that we stop the first color at x% and start the second color at x% or <x%. This removes the gradient from the linear-gradient and defines a clear edge between both colors giving the background a multi-colored-material effect. You can check out more in the post.

You can check out the extension here: https://chrome.google.com/webstore/detail/simple-clock/fngkigemfllijjloedplghepagidclef

GitHub link to the project: https://github.com/Raja-Krishna/Simple-Clock

DEV Community: Raja Krishna

Different use for CSS gradients