CSS Learnings! - Part 2
Tags: css, codenewbie, webdev
Published: 2021-09-26 06:50:24

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvl2k1adgjgmof9xmdke.png)

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:
```HTML
background:linear-gradient(<angle>, <color#1> <breakpoint in % value>, <color#2> <breakpoint in % value>);
```
```CSS
Example:
background: linear-gradient(180deg, navy 10%, yellow 90%);
/* If angle is left out default is 180degrees.*/
```
Result of that would look like this:
![Linear gradient from blue to yellow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s156g38wcjbabs3j2g8c.png)<figcaption>See that the navy starts to turn yellow at 10% position</figcaption>

You can definitely use hexcodes, rgba or hsla for specific shades.
```CSS
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:
![90 deg linear from pink to blue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9x7jf1xv8yhsk36jz50.png)

If you want to see some good color combos for linear, [makeuseof.com](https://www.makeuseof.com/css-background-gradients/) 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. 

```CSS
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%);
```
![Radial gradient](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00vjptsx7e1ybqtd7blf.png)<figcaption>There are more ways to personalize a radial gradient. Like to where each color starts and ends and how many colors you can put.</figcaption>

[Tympanus.net](https://tympanus.net/codrops/css_reference/radial-gradient/) 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:
```HTML
/* Simplest way I got to implement repeating-linear */
background: repeating-linear-gradient(<angle> <color1>, <color2> <width of each instance>);
```
```CSS
Example:
background: repeating-linear-gradient(215deg, black, yellow 30px);
```
![repeating linear gradient](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4um0bai6nigom5cnnhdd.png)

- 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](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-radial-gradient()#formal_syntax) from MDN Web Docs. 

A very creative implementation I saw was from [Bennett Freely's](https://codepen.io/bennettfeely/pen/jOEjmXK) CodePen!

Check his design out!
{% codepen https://codepen.io/bennettfeely/pen/jOEjmXK %}


***
### Conic-gradient
I’ve seen it use as pie charts, color pickers.
If done this way:
```CSS
background: conic-gradient(from 90deg, #9c27b0, #ffeb3b); 
```
It would look like this:
![Conic gradient](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ou85zxk1xrl4c8bdc8wr.png)<figcaption>A conic gradient at 90degrees starting from '#9c27b0' to '#ffeb3b'</figcaption>

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

Check out Lucas Bebber's [CodePen](https://codepen.io/lbebber/pen/RPLQxN) using conic-gradient!
{% codepen https://codepen.io/lbebber/pen/RPLQxN %}

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](https://css-tricks.com/a-complete-guide-to-css-gradients/#accessibility).

***
## Results!
In our mock landing page, I got to use linear-gradient in a couple of components!
![Final result button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4cwqx87hjwuqee9wzdx.png)

![result - header content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kuvny6noenqk0p5ysmzf.png)

![background linear gradient](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnby78sftpncmrxzpys3.png)

Here's my CodePen for the final results!
{% codepen https://codepen.io/tolentinoel/pen/vYZzmYq %}

A good web app I came across called [CSS gradient generator](https://cssgradient.io/)! 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](https://www.flaticon.com/search?word=boost&type=icon&license=selection&order_by=4)
- Other CodePen examples - [Aepicos' Radial Gradient](https://codepen.io/aepicos/pen/YzNebYr) & [Tyler Fry's Linear gradient](https://codepen.io/frytyler/pen/EGdtg)
- [makeuseof.com](https://www.makeuseof.com/css-background-gradients/) - for the list of linear-gradient color combos.
- [projects.verou.me](https://projects.verou.me/css3patterns/) - More patterns using linear-gradient!
- [Bennett Freely's](https://codepen.io/bennettfeely/pen/jOEjmXK) CodePen! - repeating-radial-gradient