DEV Community

Cover image for CSS Learnings! - Part 2
Ellaine Tolentino
Ellaine Tolentino

Posted on

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.

result page

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>);
Enter fullscreen mode Exit fullscreen mode
Example:
background: linear-gradient(180deg, navy 10%, yellow 90%);
/* If angle is left out default is 180degrees.*/
Enter fullscreen mode Exit fullscreen mode

Result of that would look like this:

Linear gradient from blue to yellow
See that the navy starts to turn yellow at 10% position

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%);
Enter fullscreen mode Exit fullscreen mode

It should come out as this:
90 deg linear from pink to blue

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%);
Enter fullscreen mode Exit fullscreen mode

Radial gradient
There are more ways to personalize a radial gradient. Like to where each color starts and ends and how many colors you can put.

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>);
Enter fullscreen mode Exit fullscreen mode
Example:
background: repeating-linear-gradient(215deg, black, yellow 30px);
Enter fullscreen mode Exit fullscreen mode

repeating linear gradient

  • 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); 
Enter fullscreen mode Exit fullscreen mode

It would look like this:

Conic gradient
A conic gradient at 90degrees starting from '#9c27b0' to '#ffeb3b'

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!
Final result button

result - header content

background linear gradient

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:

Discussion (0)