DEV Community

Cover image for How to Create Beautiful Gradients with CSS
Mahesh Patidar
Mahesh Patidar

Posted on

How to Create Beautiful Gradients with CSS

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.โœจ

logo.jpg

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.

condition gradient fg.png

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 ๐Ÿ‘‡

Gradient-3.png

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.

Gradient-4.png

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.

Gradient-5.png

Radial gradient -

A radial gradient starts from a central point and radiates outwards towards the outer endpoint.

radial gradient.png

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 ๐Ÿ‘‡

size.png

โœ” 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.

radial basic.png

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 ๐Ÿ‘‡

shape fg.png

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 ๐Ÿ‘‡

sizing radial.png

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 ๐Ÿ‘‡

position radial.png

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.

basic conic fg.png

Positioning -

position conic fg.png

Easy gradient generators ๐Ÿ‘‡

โšก https://gradientgenerator.com

โšก https://cssgradient.io

โšก https://colordesigner.io/gradient-generator

This is my first blog post and I would like to read your feedback as well as criticism.

Discussion (2)

Collapse
nikolab profile image
Nikola Betica

Good article. There is also repeating-conic-gradient function in css. dev.to/nikolab/css-repeating-conic...

Collapse
ali6nx404 profile image
Mahesh Patidar Author

thanks for adding btw I'm also planning to write advanced blog on gradient so i didn' t added this property