CSS Gradient Color Generator

Contents

  1. Generate Gradient Colors
  2. Create Gradients with Multiple Color Stops
  3. Types of CSS Gradients
  4. Gradients Examples

Gradients are a powerful and visually appealing way to transition between colors in your web designs. In this page, we will explore the different types of CSS gradients, along with examples and code snippets to help you get started.

Generate Gradient Colors

Easily design beautiful linear and radial gradients with our user-friendly color generating tool.

How to Use the CSS Gradient Color Generator

  1. Choose a Gradient Type: Select from linear, radial, or conic.
  2. Pick Your Colors: Use the color picker to choose your desired colors.
  3. Adjust Gradient Settings: Modify the angle, shape, or position depending on the gradient type.
  4. Copy the CSS Code: Once satisfied, simply copy the generated CSS code and use it in your web project.
Example Colors
Position:

Generated code CSS

CSS
background: linear-gradient(90deg, #608F08 10%, #CBF705 90%);

Generate Custom Gradients with Multiple Color Stops

This tool allows you to effortlessly create and customize gradients with multiple color stops, including linear, radial, and conic gradients.

You can add multiple color stops to create more complex gradients. Color stops can be positioned using percentages or lengths

Create Striking Color Stripes

Design vibrant color stripes using CSS gradients. Simply click on the 'Stripes' tab, choose your colors, and hit the 'Convert' button. You can also adjust the color positions in the 'Color Options' tab for further customization

  • Color 1
  • Color 2
  • Color 3
Add stop color

Generated multiple color gradient CSS code

CSS
background: linear-gradient(
	90deg,
	#039487,
	#9C27B0,
	#FF9800
);

What is a CSS Gradient?

A CSS gradient is a transition between two or more colors that smoothly blends one into another. Gradients can add depth, dimension, and a professional touch to your web designs. There are three main types of gradients in CSS: Linear Gradients, Radial Gradients, and Conic Gradients.

Types of CSS Gradients

1. Linear Gradient

Linear gradients transition from one color to another in a straight line. You can specify the direction of the gradient.

Syntax:

CSS
background: linear-gradient(direction, color-stop1, color-stop2, ...);

Directions:

Here are the main directions for linear gradients:

  • to bottom
  • to top
  • to right
  • to left
  • to bottom right
  • to top left
  • to bottom left
  • to top right
  • Using Angles 45deg

Examples:

Horizontal Gradient:

CSS
background: linear-gradient(to right, #3498db, #2ecc71);

Preview:

Vertical Gradient:

CSS
background: linear-gradient(to bottom, #3498db, #2ecc71);

Preview:

Diagonal Gradient:

CSS
background: linear-gradient(190deg, #3498db, #2ecc71);

Preview:

2. Radial Gradients

Radial gradients transition colors from a center point outwards in a circular pattern.

Syntax:

CSS
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

Radial Gradient Position:

  • circle
  • ellipse
  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Examples:

Circular Gradient:

CSS
background: radial-gradient(circle, #ff5f6d, #ffc371);

Preview:

Elliptical Gradient:

CSS
background: radial-gradient(ellipse at center, #42e695, #3bb2b8);

Preview:

3. Conic Gradients

Conic gradients are like radial gradients but the color transitions around a center point in a circular direction (like the slices of a pie chart).

Syntax:

CSS
background: conic-gradient(from angle, color-stop1, color-stop2, ...);

Conic Gradient Directions:

  • from angle
  • at position

Basic Conic Gradient:

CSS
background: conic-gradient(from 0deg, #4facfe, #00f2fe, #fa709a, #fee140);

Preview:

Repeating Conic Gradient:

CSS
background: repeating-conic-gradient(from 0deg, #ff000a, #ff000a 10%, #00ffd0 10%, #00ffd0 20%);

Preview:

Gradients Examples

1. Stripes (SMPTE color bars)

CSS
background: linear-gradient(90deg,
		    #ffffff 14%, #ffff00 14%, #ffff00 29%, #00ffff 29%, #00ffff 43%, #008000 43%,
		  	#008000 57%, #ff00ff 57%, #ff00ff 71%, #ff0000 71%, #ff0000 86%, #0000ff 86%);
Try it yourself

2. Rainbow Gradient

CSS
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
Try it yourself

3. Spectrum Gradient

CSS
background: linear-gradient(90deg,
		    #f00, #ff2b00, #f50, #ff8000, #fa0, #ffd500, #ff0, #d4ff00, #af0, #80ff00, #5f0, #2bff00,
		    #0f0, #00ff2b, #0f5, #00ff80, #0fa, #00ffd5, #0ff, #00d4ff, #0af, #007fff, #05f, #002bff,
		  	#00f, #2a00ff, #50f, #7f00ff, #a0f, #d400ff, #f0f, #ff00d4, #f0a, #ff0080, #f05, #ff002b, #f00);
Try it yourself

4. Candy Cane Gradient (Repeating Linear)

CSS
background: repeating-linear-gradient(-45deg, #ff0000, #ff0000 20px, #ffffff 20px, #ffffff 40px);
Try it yourself

5. Sunset

CSS
background: linear-gradient(to top, #0b486b, #f56217);
Try it yourself

6. Sun

CSS
background: radial-gradient(ellipse at 50% 50%, #F7B733 20%, #F7B733 14%, #FC4A1A 26%, #1a4969);
Try it yourself
Select color theme
×