Hi there devs, In this, I will try to document my learnings and be more clean and minimal. First part focuses on the gradient in web background.
Now, there can be 2 types of gradients based upon the geometry of the design
- Linear Gradients - Gradient which follow a straight line (down/up/left/right/diagonally)
- Radial Gradients - Gradients in circle form (defined by their center)
Linear Gradient Syntax
background: linear-gradient(direction, firstColor, secondColor, thirdColor...);
background: linear-gradient(directionDegree, firstColor, secondColor, thirdColor...);
Note : Default direction will be from top-bottom if no direction is given
Let's jump to test cases on google.com:-
Test Case 1: No direction, only two colors red and blue
background: linear-gradient(#d02525, #8ab4f8);
Test Case 2: No direction, more than two colors
linear-gradient(90deg , #d02525, #8ab4f8, #d69317);
Test case 3: You can also use the direction as to right , to left , to bottom , to bottom right (if diagonal)
Sample Code Syntax
background: linear-gradient(to bottom right , #d02525, #8ab4f8);
Now what if you need some transparency with a gradient effect, Guess what we have already a solution for that too, just add transparent percentage after your color or you can use rgba
linear-gradient(to top, #fad0c4 6%, #ffd1ff 100%)
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
Yes, that's it. We have covered up Linear Gradient. . Don't worry just replace linear-gradient with radial-gradient, Guess what here we need not give direction as the name suggests it, the start color will start from center one
background: radial-gradient(#3c98bc, #ca161661);
There are other properties, most of the time you will use the linear gradient.
Yes, I am getting involved in document my learning this year .Please feel free to ping me for updation of this article