Dopely Colors
dopely colors

What's new.


Color Blind Simulator


Image Color Overlay


Adjust Image Hue


Explore Pantone Colors


Explore Material Colors

pick color from image iconPick Color From Image
redo icon
undo icon
Image To Color
URL (Link)
Photo Directory
Select or Drop Image

About Gradient Generator Tool

Another powerful tool from Dopely's color tool set, this one helps you pick the right color gradient. By adjusting the hue, saturation, and lightness, you can edit and add up to 15 colors to your color transition, either choosing the linear or circular type. In the linear type of Dopely color gradient maker, it is possible to select any angle between 0 to 360 degrees. By using the randomize button, you will see random color gradients and you can edit, like, save or export any of them. Also, checkout Dopely gradient in full mode!

What is gradient?

Surely we have all seen the rainbow for once. Rainbow colors are a kind of gradient, because, by nature, it is a slow and gradual transition from purple to red in seven steps.

Gradient is a gradual combination of colors that do not have a clear boundary between them, hence it is also called color transitions (remember the rainbow). As a result, in a design or image that consists of one or more colors that do not have a definite border, we say that there is a gradient.

What are the usages of color gradients?

You can use Gradient to add depth and dimension to your image and design that you want to have a more natural color change and the color difference is the same in all parts of the image. Even the gradual blending of white or black into different colors falls into the category of gradients and can give us its proximity and distance to the light source. And it is the existence of gradients in nature and our environment that has led to its use in images. And make those images look natural and real.

Because in a real-world environment, the human eye rarely encounters flat colors, because natural / artificial light falls on surfaces in different directions depending on the angle. Gradients add originality, brightness, character and realism to the shapes in the image and always brighten the image.

Each color conveys different emotions to us. So if you choose inappropriate colors, you convey an unpleasant feeling to the audience, and if you choose the right colors, you can induce a positive feeling in them. These colors can be similar colors such as brown, light orange and dark red or contrasting colors such as red and green. And that is why the world of gradients has become an infinite world. A world that has become very popular in the last few years.

Gradient in graphics and Photoshop lets you use opportunities to provide new designs to your audience. This gradual transmission of gradient colors creates two-dimensional and 3D visuals. Also, it is used to add depth to images and you can create attractive tissues for the background. And so wonderful your boring designs!

What are the types of gradients?

There are 9 kinds of color gradients. Linear, radial, diamond, angle, reflected, blur, free form, mesh and conic gradient to name them all. Let's get deeper in each one and see their examples.

Linear gradient

It is the most common type of gradient, also known as axial gradient. In a linear gradient , the colors are placed one after the other along a line, horizontally, vertically, diagonally or in any angular between 0 to 360 degrees. A linear gradient is defined by an axis — the gradient line — and two or more color-stop points. The colors of the gradient are determined by two or more points: the starting point, the ending point, and, in between, optional color-stop points.

a linear gradient from red to purple with adobe photoshop or illustrator

Radial Gradient

A Radial Gradient is defined by a center point, an ending shape, and two or more color-stop points, and the colors are drawn in concentric circles one after the other. To create a smooth gradient this type function draws a series of concentric shapes radiating out from the center to the ending shape. This gradient creates shadow and light in the design, so it is used to show depth. Also, There’s room to play with the center point, size, and rate of transition in a radial color gradient.

a radial gradient of red to purple with adobe photoshop or illustrator

Diamond gradient

This gradient is very similar to the Radial gradient. The only difference is that, as the name implies, it creates a diamond shape (or even it is right to say rectangular shape) from the starting point. The end point is a corner of the diamond.

a diamond gradient of red to purple with adobe photoshop

Angle gradient

In angle gradients , the color starts from a point in the form of a right-angled side, and in the opposite direction of the clock, the colors disappear one after the other and return to the starting point after rotating 360 degrees. Like a radar screen.

an angle gradient of red and purple with adobe photoshop

Reflected gradients

In reflected gradients , the colors with the same spectrum cover both sides of the image to create a state of reflection.

a reflected gradient of red and purple with adobe photoshop

Blur gradient

With this gradient, you can increase the blur around your subject so that it is not recognizable. This type is usually used in the background of sites and software.

a blur gradient contains pink, yellow, red, purple and blue with adobe photoshop

Free form gradient

Free form gradients is the best type. In this type, you can use different colors in close ranges in a regular or random order and place the color anywhere you need, so that the combination looks smooth and natural.

a free form gradient of purple and red with adobe illustrator

Mesh gradient

Gradient mesh is a way to add specific areas of color to a piece of artwork. This is done through a series of mesh points that are present in some generators.

a mesh gradient contains yellow, orange, red, purple and blue with adobe illustrator

CSS gradient

As a web designer, you need to keep up with the latest technology and stay creative! Now that you are familiar with gradients, you know that most of the uses of gradients are as the backgrounds, like illustrations and menus of sites. In the past, Photoshop was used to implement gradients in site design. But since sites were also displayed on mobile phones, it was no longer possible to use Photoshop gradients. Because they slowed down the site, they increased the content of the site and disrupted the appearance of the site on mobile. Nowadays, with the advent of CSS code, these problems have been largely solved. In addition, with these CSS codes, you can design attractive gradients. These gradients increase the speed of the site, reduce the volume of the site, make the background attractive and give the site a special effect.

    There are two types of CSS gradients:

  • Linear Gradient CSS
  • Radial Gradient CSS
Which is exactly the same as the gradients I described below.

Usage of gradient:

  • 1. Gradients in logos

    Gradients can convey a sense of uniqueness, using it in the logo can make the logo more prominent and make it easier to convey the main message of the logo. This way you can create new innovative designs and reap the benefits. Like the new Instagram logo, which is the most famous

  • an example of gradient in logos like instagram icon
  • 2. Gradients in product packaging

    Colors play an important role in selecting and attracting customers. By choosing the right color for your products, you can make your desired product popular among the people. For example, the cosmetic brand Tria Beauty has used packaging with different gradients.

  • an example of gradients in product packaging like tria
  • 3. Gradients in Website Design

    The use of gradients in the design of websites is very popular. The skillful use of gradients in the design gives a beautiful and unique look to the website and can effectively attract the user's attention. Using gradients as a background and placing page elements on it is also very popular. In this case, this background gradient, like a guide, moves the user's eyes to the desired point and makes images and text look better.

How to choose the right colors for the gradient?

  1. 1. Choose the right color for your brand

    Each color is a special symbol of different emotions and conveys a different feeling to the audience. For example, red is a symbol of enthusiasm. So you need to know what color your brand needs depending on the type of products and the message it wants to convey to others. So you need to master the color wheel!

  2. 2. Make an smart choice

    Choose colors that are so close and similar that there is no gradient and not so far away and inappropriate that they look annoying. You must be careful not to draw a clear line between the colors of your gradient. And use a softer color range. If your gradient contains two colors, it may contain a dull color in the middle, so it is better to use three colors in the gradient. Using more than 3 colors may not be interesting and it is better to give up. You can get better results by increasing or decreasing the opacity.

  3. a linear modified gradient from yellow to orange
  4. 3. Get to know your audience

    In addition to paying attention to your brand, you should also pay attention to your audience. For example, if your audience is an artist, they will be attracted to brighter colors. And if they are merchants, they are fascinated by the yellow and gold colors.

  5. 4. Be inspired by nature

    Nature is full of gradients that you can use and offer more natural work to your audience.

  6. a beautiful multi color gradient inspired by sky in nature


Dopely color gradient generator allows you to:

  1. Horizontal, vertical, diagonal and radial gradients
  2. Complex multi-stop gradients
  3. Opacity support with multiple opacity stops
  4. Hex, RGB, RGBA, HSL, HSLA color formats
  5. Adjust gradient by hue, saturation, lightness
  6. More than 135 gradient presets
  7. Saving custom gradient presets
  8. Gradient permalinks for sending and sharing
  9. More Soon!

features of Dopely colors gradient generator free web tool


Change the angle of linear gradient by moving Triangle in middle of Gradient section:

change angle of linear gradient

Move stop points by hold and moving them and add new stop point with plus Button across gradient line.

add and edit stop points of gradient

Edit selected Colors with Hex code, Hue, Saturation, Lightness and Change mode of gradient from linear to radial And conversely.

Edit gradient by hex code , hue , saturation , lightness