Are you using solid color background?π
Let's upgrade it with beautiful CSS gradients β¨
Mega threadπ§΅π
Let's upgrade it with beautiful CSS gradients β¨
Mega threadπ§΅π
1οΈβ£ What is the gradient?
CSS gradient allows you to create anything from a smooth gradient between two colors, right up to impressive mixing and multiple gradients.
Gradient makes the background more attractive than a solid color.
CSS gradient allows you to create anything from 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.β¨
The genius is in its simplicity.β¨
2οΈβ£ 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.β¨
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.
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π
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 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".
π
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".
π
βΌ 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.
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.
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.
βΌ Code Example at one place π
β¨ Radial gradient -
A radial gradient starts from a central point and radiates outwards towards the outer endpoint.
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
- 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 π
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.
Your shapes will be between an ellipse or a circle.
This determines the shape of the gradient, and because weβre talking about radial gradients,
theyβre limited to being circular in nature.
Your 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.β
1/2
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.β
1/2
We can also specify an exact position using a numeric value, including the percentage.
Default is center center.
2/2
Default is center center.
2/2
βΌ 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.
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 example of both π
we already discussed shape and we have 2 values an ellipse or a circle.
Let's see 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 π
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 π
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
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.
As like linear and radial gradients, all we need to create a conic gradient are two colors.
βΌ Positioning -
Wait there is still a lot left to share but I think it's enough now π
but still, I have some other resources to make gradient creation easy.π€©
Let's check π
but still, I have some other resources to make gradient creation easy.π€©
Let's check π
Easy gradient generators π
β‘ gradientgenerator.com
β‘ cssgradient.io
β‘ colordesigner.io/gradient-generβ¦
β‘ gradientgenerator.com
β‘ cssgradient.io
β‘ colordesigner.io/gradient-generβ¦
I know this thread is huge and it's not easy to remember all the things.π§
So just hit the bookmark and save it for future reference.π
So just hit the bookmark and save it for future reference.π
And that's it. I tried my best to explain gradients.
If you like this thread, drop a like and retweet, means a lot to me π
If you like this thread, drop a like and retweet, means a lot to me π
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
