CSS Learnings! - Part 2

For this weeks’ CSS learning, I recently got to try and play around with gradients! This curiosity for ‘textures’ kicked off after my recent blog!

By the end of this blog, we should have a mock landing page like this with our own interpretation.

Let’s get started!

What are gradients?

The easiest way I can explain it is the way 2 or more colors gradually transition from a point or position. Maybe in other media, it can be called blending or ombré(One hue to another).

Types of gradients

I recently read that gradients can be multiple kinds. Below is the list:

Linear-gradient

Can be adjusted with angle value.

Syntax:

background:linear-gradient(<angle>, <color#1> <breakpoint in % value>, <color#2> <breakpoint in % value>);

Example:
background: linear-gradient(180deg, navy 10%, yellow 90%);
/* If angle is left out default is 180degrees.*/

Result of that would look like this:

You can definitely use hexcodes, rgba or hsla for specific shades.

background: rgb(238,174,202); /* fallback background-color */
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);

It should come out as this:

If you want to see some good color combos for linear, makeuseof.com has a list of a few you can use!

Radial

Radial can be used for that glow effect since the spread is circular or in radius. Can also be used for vignetting or sunflare-effect.

background: rgb(131,58,180); /* fallback background-color */
background: radial-gradient(circle, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 52%, rgba(252,176,69,1) 100%);

Tympanus.net explained in their article on how to greatly utilize positions and personalize a radial-gradient.

Repeating

I find this type great when creating custom patterns or textures. Example like checkers, chevron, stripes, 3d stripes and many more!

• Repeating Linear Syntax:

/* Simplest way I got to implement repeating-linear */
background: repeating-linear-gradient(<angle> <color1>, <color2> <width of each instance>);

Example:
background: repeating-linear-gradient(215deg, black, yellow 30px);

• Repeating Radial With repeating-radial-gradient, you can specify the shape;
  • ellipse
  • circle

Each ending shape can be specified into positions;

• closest-side
• closest-corner
• farthest-side
• farthest-corner

Check out the formal syntax from MDN Web Docs.

A very creative implementation I saw was from Bennett Freely's CodePen!

Check his design out!

Conic-gradient

I’ve seen it use as pie charts, color pickers.
If done this way:

background: conic-gradient(from 90deg, #9c27b0, #ffeb3b); 

It would look like this:

Since I started sharing creative implementations of the ones above, I found one for conic-gradient too!

Check out Lucas Bebber's CodePen using conic-gradient!

There is also a variation of this called repeating-conic-gradient which is the same principle as the repeating ones above, but is currently not compatible with IE browsers.

There are accessibility factors to keep in mind when applying gradients, CSS-Tricks broke it down on their article.

Results!

In our mock landing page, I got to use linear-gradient in a couple of components!

Here's my CodePen for the final results!

A good web app I came across called CSS gradient generator! If you have your colors in mind and wanted to see it before typing all your CSS code, this is the quickest way to test!

I hope you guys enjoy trying this out as much as I do!
Until the next!

References:

• Icons used are from Flaticon
• Other CodePen examples - Aepicos' Radial Gradient & Tyler Fry's Linear gradient
• makeuseof.com - for the list of linear-gradient color combos.
• projects.verou.me - More patterns using linear-gradient!
• Bennett Freely's CodePen! - repeating-radial-gradient