Fun with Linear & Radial Gradients
During the craziness that has been 2020, (and now into 2021), with way too much time at home and having finally watched Game of Thrones, my fiancee and I decided to enroll in online coding bootcamps. In an effort to take over the world together, she attended Hackbright Academy focusing on Python and I enrolled in UC Berkeley’s Coding Bootcamp with an emphasis in JavaScript.
As my GitHub fills up with projects, I wanted unison to all the websites I was creating, while also keeping things bright and positive in these trying times. This has drawn me to linear and radial gradients. One simple line of CSS code changes a website from being a boring required project to something bright, fun and mine.
The white space and flat color minimalist design preference that has become commonplace is great for brand identity, but for my personal portfolio, I want color.
With nearly all modern browsers supporting gradients (thank you Chromium), they are an easy way to liven up a basic webpage, yet also highly customizable.
While there are both linear and radial gradients, what I have been drawn to most often is the linear variation.
Linear gradients are considered an image property in CSS, so they are not set as “background-color” or “color”. Also because of this, they can be set to repeating, or to a set height.
/* Top down gradient red -> Yellow*/
background-image: linear-gradient(rgb(255, 0, 13), rgb(255, 255, 0));/* Center out to corners blue -> green*/
background-image: radial-gradient(rgb(24, 0, 240), rgb(0, 255, 0));/* Bottom Left to Top Right aqua -> purple*/
background-image: linear-gradient(75deg, aqua, purple);
With gradients, your options are not limited to simply picking two colors. You can add a multitude of colors to progress between, a degree to change their direction, or a percentage to display each color an exact amount on the page. You can even set a start harsh line start and stop via the percentage to have bars of color displayed instead of gradations.
background-image: linear-gradient(red 15%, orange 15% 30%, yellow 30% 45%, lime 45% 60%, blue 60% 75%, purple 75% 90%);
If you don’t want bright colors for your website, you can even use monochrome. Easily differentiate between sections by snaking the colors for different divs, start with a grey at the top gradient down to white, then from white back to grey.
Most of what I have learned about gradients comes from CSS-Tricks. Patrick Brosset also has an in depth article here on Medium with great technological descriptions.
There are no more excuses for boring white webpages or dealing with the hassle of trying to add or center a background image in CSS. Enjoy the wonders of gradients instead, and make the internet more colorful!
