Ramesh Chandra's Blog
CSS Gradient: The Ultimate Tool

CSS Gradient: The Ultimate Tool

Create beautiful CSS Gradients for your websites.

RAMESH CHANDRA POLA's photo
RAMESH CHANDRA POLA
·

3 min read

Table of contents

Hello everyone! 🧡

Before we start Let’s stay connected. GitHub⭐LinkedIn and also follow me here for more useful blogs.

In this article, we will learn what gradients are and also types of CSS gradients.

Let's get started🤩

waiting_gif

What is a gradient?

Gradients are CSS elements of the image data type that show a transition between two or more colours. Gradients are very much important as they give good UX to the users. The most popular use for gradients would be in a background element. Backgrounds have a massive impact on a website’s design. So I hope this blog will help you to make beautiful coloured gradients.

The term background-image refers specifically to gradients. Because gradients have a stacking order, you can think of them as layered background images

Types of Gradients ✨

There are three types of gradient functions in CSS:

  1. Linear-Gradient (created with the linear-gradient() function)
  2. Radial-Gradient (created with the radial-gradient() function)
  3. Conic-Gradient (created with the conic-gradient() function).

Linear Gradient

  • A linear gradient creates a band of colours that progress in a straight line.
  • A linear gradient is made up of two basic components: direction and color-stops.
  • To create a gradient, You must have at least two colors, but you can have as many as you want.

1. Direction

// Default direction will be from top-bottom if no direction is given 
  background-image: linear-gradient( #fc00ff, #00dbde);
// From left to right
  background-image: linear-gradient( to right, #fc00ff, #00dbde);

image.png

In the same way, we can change their rotation by specifying a direction.

// Diagonally, From corner to corner
background-image: linear-gradient( to bottom right, #fc00ff, #00dbde);
// Specific angle
background-image: linear-gradient( 70deg , #fc00ff, #00dbde);

image.png

2. Color stops

  • Color stops define what colors make up the gradient and optionally, where to put them.
  • If you specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point

colorstops.gif

  background-image: linear-gradient(#eb622c ,#fc00ff 70%, #00dbde);

image.png

Radial Gradient

  • Radial gradients are similar to linear gradients, except that they radiate out from a central point
// Simple Radial-gradient
  background-image: radial-gradient(#1CD8D2,#ff77cd);
// Radial color stops
  background-image: radial-gradient(#1CD8D2 12px,#ED4264 30%,#7474BF 60%);

image.png

Conic Gradient

  • Creates an image consisting of a gradient with color transitions rotated around a center point.
    // Simple Conic Gradient
background: conic-gradient( #EECDA3, #EF629F);
// Positioning the conic center
background: conic-gradient(at 10% 30%, #fffb00 20%, #e246cd 30%, #27f1f1 40%);

Add a little bit of body text (1).png

Bonus ✨

Here are some websites which provide a huge collection of gradients where you can copy CSS codes.

My work here is done, We have Hundreds of beautiful colors out there. Now it's your work to use your creativity and make beautiful Gradients for your websites.🥳🧡

That's all for today! 😁 You reached the end of the article 😍 If you found this article helpful, please like and share it 🧡. wow.gif Don’t forget to share this article with your friends or colleagues. I'm Ramesh Chandra pola who loves to build projects and share valuable tips in my Blogs. Feel free to connect with me on any of the platforms below!🧡
GitHub⭐LinkedIn

CSSUIDesignJavaScript