Let's start this blog with a confession, I wrote this detailed thread for Twitter then I decided to turn it into the blog and upload it here too.
I'm writing this blog because I found learning gradient a little bit difficult in my early days. there are different types of gradients available and we mostly end up using a basic linear-gradient, but the gradient is far more powerful than you think.
In this, I'm going to cover all the basics and most important concepts of the gradient.
in the next blog, I will share some real-world examples and more advanced usage of gradients.
What is the gradient?
CSS gradient allows you to create a smooth gradient between two colors, right up to impressive mixing and multiple gradients.
Gradient makes the background more attractive than a solid color.
We all know about Instagram but did you notice that the Instagram logo is also a gradient.
The genius is in its simplicity.✨
Types of gradients?
There is three gradient function in CSS.
- Linear Gradient
- Radial gradient
- Conic gradient
Let's talk about each type in more detail.✨
Linear Gradient -
A linear gradient starts at one point and changes along a straight line to the endpoint.
The direction of the linear gradient can be up/down, left/right, or diagonal.
To create a linear gradient you must define at least two-color.
Basic linear gradient -
To create the most basic gradient you just need to specify two-color. Two colors are the minimum required but you can have color as much as you want.
Without specifying angle will consider top-to-bottom.
Example👇
Changing the direction of Gradient -
The values are "to top", "to bottom", "to left", and "to right" used to change direction.
even we're free to use both the horizontal side (left or right), and the vertical side (top or bottom) after "to".
Example 👇
Angle for changing direction -
We Are free to use an angle unit to specify the direction of the gradient.
The values are equivalent -
to top - 0deg,
to bottom - 180deg,
to left - 270deg,
to right - 90deg.
you can also use other angle units.
Color stop -
One thing we didn't talk about as of now is "color-stop". Color stops are the colors you want to render smooth transitions among.
A color-stop value, followed by one or two optional stop positions. in percentage or in length.
Radial gradient -
A radial gradient starts from a central point and radiates outwards towards the outer endpoint.
Before we move further let's discuss some key terms -
- Size
- Shape
- Position
- color-stop ( Same as linear one )
Let's dive deeper 👇
✔ size -
The size influences the ending shape of the gradient by taking the shape value you determined and instructing the gradient where to end.
- closest-side
- closest-corner
- farthest-side
- farthest-corner ( default one )
Detailed explanation 👇
✔ Shape -
This determines the shape of the gradient, and because we’re talking about radial gradients,
they’re limited to being circular in nature. our shapes will be between an ellipse or a circle.
✔ Position -
This works the same way it does on background-position, So, keywords like “top,” “right,” “left,” and “center” will work here. You can even use a combination like, “top center.”
We can also specify an exact position using a numeric value, including the percentage. Default is center center.
Basic Radial gradient -
To create the most basic gradient you just need to specify two-color. Two colors are the minimum required but you can have color as much as you want.
All others are default values because we are just specifying colors.
shaping of radial gradient -
we already discussed shape and we have 2 values an ellipse or a circle.
Let's see an example of both 👇
Sizing of radial gradients -
we already discussed all the sizing values, let's see one or two values in the example.
for better understanding play with all values.
example 👇
Changing Position -
We already talked about the positioning of the gradient.
A radial gradient doesn’t have to start at the default center. It can specify a certain point.
example 👇
Conic gradient -
A conic gradient has a center point in your box and starts from the top and goes around in a 360-degree circle.
The conic-gradient function accepts the position and angle arguments. By default, the angle is 0 degrees which starts at the top, in the center
Above we already talked about position or angle, so let's see some examples.
👇👇
basic conic gradient -
As like linear and radial gradients, all we need to create a conic gradient are two colors.
Positioning -
Easy gradient generators 👇
⚡ https://gradientgenerator.com
⚡ https://colordesigner.io/gradient-generator
This is my first blog post and I would like to read your feedback as well as criticism.
Top comments (2)
Good article. There is also repeating-conic-gradient function in css. dev.to/nikolab/css-repeating-conic...
thanks for adding btw I'm also planning to write advanced blog on gradient so i didn' t added this property