CSS Gradients

img01

Spring Greens

linear-gradient
(90deg, #54541F 10%, #D9E021 90%)
View jpeg | View CSS

img01

Silver Light

linear-gradient
(90deg, #A3A5A8 10%, #E6E7E8 90%)
View jpeg | View CSS

img01

Anarchist

linear-gradient
(90deg, #CE242B 10%, #231F20 90%)
View jpeg | View CSS

img01

Pina Colada

linear-gradient
(90deg, #F1D8A6 10%, #F0D070 90%)
View jpeg | View CSS

img01

Old Gold

linear-gradient
(90deg, #FBC926 10%, #C3922E 90%)
View jpeg | View CSS

img01

Moorland

linear-gradient
(90deg, #6E2405 10%, #737144 90%)
View jpeg | View CSS

img01

Blue Retreat

linear-gradient
(90deg, #5599FF 10%, #BF4A44 90%)
View jpeg | View CSS

img01

Fusion

linear-gradient
(90deg, #CBDB2A 10%, #B72467 90%)
View jpeg | View CSS

img01

Harmony

linear-gradient
(90deg, #7F47DD 10%, #FBAE17 90%)
View jpeg | View CSS

img01

Purple Paradice

linear-gradient
(90deg, #1D2B64 10%, #F8CDDA 90%)
View jpeg | View CSS

img01

Sunrise

linear-gradient
(90deg, #FF512F 10%, #F09819 90%)
View jpeg | View CSS

img01

Aqua Marine

linear-gradient
(90deg, #1A2980 10%, #26D0CE 90%)
View jpeg | View CSS

img01

Aubergine

linear-gradient
(90deg, #AA076B 10%, #61045F 90%)
View jpeg | View CSS

img01

Miaka

linear-gradient
(90deg, #FC354C 10%, #0ABFBC 90%)
View jpeg | View CSS

img01

Winter

linear-gradient
(90deg, #E6DADA 10%, #274046 90%)
View jpeg | View CSS

img01

A Lost Memory

linear-gradient
(90deg, #DE6262 10%, #FFB88C 90%)
View jpeg | View CSS

img01

Blurry Beach

linear-gradient
(90deg, #d53369 10%, #cbad6d 90%)
View jpeg | View CSS

img01

Army

linear-gradient
(90deg, #414d0b 10%, #727a17 90%)
View jpeg | View CSS

img01

Shrimpy

linear-gradient
(90deg, #e43a15 10%, #e65245 90%)
View jpeg | View CSS

img01

Bourbon

linear-gradient
(90deg, #EC6F66 10%, #F3A183 90%)
View jpeg | View CSS

img01

Mantle

linear-gradient
(90deg, #24C6DC 10%, #514A9D 90%)
View jpeg | View CSS


 

 

SVG Gradients

img01

Blush

linear-gradient
(#f5f69c, #a90021)
View jpeg | View SVG

img01

Blue Lagoon

linear-gradient
(#f5f69c, #a90021)
View jpeg | View SVG

img01

Fierce Queen

linear-gradient
(#fa0064, #9b0323)
View jpeg | View SVG

img01

Mumbi Breeze

linear-gradient
(#fccb20, #d96653)
View jpeg | View SVG

img01

Snow Forecast

linear-gradient
(#d3d3e6, #567389)
View jpeg | View SVG

img01

Cornflower Blue

linear-gradient
(#0724FE, #7CB7FB)
View jpeg | View SVG

img01

Damask Rose

linear-gradient
(#DAC2DD, #9D1365)
View jpeg | View SVG

img01

Grass Green

linear-gradient
(#b6e60e, #2ba057)
View jpeg | View SVG

img01

Lemon Yellow

linear-gradient
(#FCE560, #E0BA08)
View jpeg | View SVG

img01

Midnight Trist

linear-gradient
(#23062b, #e67c92)
View jpeg | View SVG

img01

Solar Violet

linear-gradient
(#fda101, #b300fd)
View jpeg | View SVG

img01

Photosynthesis

linear-gradient
(#279201, #00deff)
View jpeg | View SVG

Creating Gradients

Gradients

Projects

Free Downloads

Education

Linear Gradients

Linear gradients move smoothly from one colour to another along a linear path. The gradients "axis" can go from left-to-right, top-to-bottom, or at any angle you chose (see "Directions"). If you don't set a prefered angle, the gradient will go from top to bottom. You need to choose at least two colours (in fact, you can have as many colours as you wish - see "Multiple Stops"). The CSS for a simple background gradient is as follows:

.gradient01 {
background-image: linear-gradient(orange, #a07bff);
}

The above code will create the following gradient:

Gradient-01

You can use all manner of colour codes, including: HTML named colors, rgba, hsla and hex.
Note that the following gradient has a mixture of a named color and an rgba color code:

.gradient02 {
background-image: linear-gradient(LightSeaGreen, rgba(82, 48, 182, 1));
}

Gradient-02

Want a gradient that moves left-to-right? Then simple add the words 'to right' inside the linear-gradient function, before you specify the colours (but more on directions of gradients under "Directions"). The following gradient moves from left to right and is constructed using rgb and hsla colour codes:

.gradient03 {
background-image: linear-gradient(to right, rgb(233, 92, 23), hsla(209, 45%, 45%, 1));
}

Gradient-03

Multiple Stops

Colour stops can be added to the linear-gradient function by simply adding more colours followed by commas. To indicate where on the gradient axis you want to place a colour, you add a length or a percentage.
If the first color-stop does not have a length or percentage, it defaults to 0%. If the last color-stop does not have a length or percentage, it defaults to 50%. If a color-stop doesn't have a specified position and it isn't the first or last stop, then it is assigned the position that is half way between the previous stop and next stop.

Look at the following two examples to see where the color stops are placed when a distance is not specified:
.gradient04 {
background-image: linear-gradient(rgb(90, 233, 108), #3f76a5, hsla(8, 95%, 45%, 1));
}

Gradient-04

.gradient05 {
background-image: linear-gradient(to right, red, orange, yellow, green, blue, violet);
}

Gradient-05

The next gradient has the colour stops indicated by percentage:

.gradient06 {
background-image: linear-gradient(to right, #50aeda 10%, #ff379a 50%, #842bb7 90%);
}

Gradient-06

And the example gradient No.7 has the colour stops placed as a length in pixels.

.gradient07 {
background-image: linear-gradient(to right, #ffd220 10px, #d4473c 100px, #ff7200 230px);
}

Gradient-07

Something a little different; in order to place a colour next to another, without any gradation, set the length of the end stop of colour#1 to be the same as the beginning of colour#2. The following example illustrates this.

.gradient08 {
background-image: linear-gradient(to right,
Azure,
Azure 20%,
Gainsboro 20%,
Gainsboro 40%,
LightSalmon 40%,
LightSalmon 60%,
NavajoWhite 60%,
NavajoWhite 80%,
RosyBrown 80%)
;

}

Gradient-08

Directions

There are two ways to indicate direction of a linear gradient's axis. By keyword, or by angle. As we have seen above, by adding the keyword expression 'to right' we can change the default top-to-bottom direction. There are eight main direction phrases that can be used:

to top, to bottom, to left, to right

to top left, to top right, to bottom left, to bottom right

The following example demonstrates these directions:

.gradient09a {
background-image: linear-gradient
(to top, OrangeRed, Indigo, PaleVioletRed)

}

Gradient-09a

.gradient09b {
background-image: linear-gradient
(to bottom, OrangeRed, Indigo, PaleVioletRed)

}

Gradient-09b

.gradient09c {
background-image: linear-gradient
(to left, OrangeRed, Indigo, PaleVioletRed)

}

Gradient-09c

.gradient09d {
background-image: linear-gradient
(to right, OrangeRed, Indigo, PaleVioletRed)

}

Gradient-09d

.gradient09e {
background-image: linear-gradient
(to top left, OrangeRed, Indigo, PaleVioletRed)

}

Gradient-09e

.gradient09f {
background-image: linear-gradient
(to top right, OrangeRed, Indigo, PaleVioletRed)

}

Gradient-09f

.gradient09g {
background-image: linear-gradient
(to bottom left, OrangeRed, Indigo, PaleVioletRed)

}

Gradient-09g

.gradient09h {
background-image: linear-gradient
(to bottom right, OrangeRed, Indigo, PaleVioletRed)

}

Gradient-09h


The keywords are useful, but for more control, you need to use a direction in degrees. 0deg is verticle and 180deg is horizontal. Look at the following examples to see both degree of gradient direction and percentage of color stop.

.gradient10a {
background-image: linear-gradient
(125deg, rgba(100, 154, 154, 1) 20%,
rgba(200, 55, 154, 1) 66%,
rgba(20, 254, 54, 1) 90%)

}

Gradient-10a

.gradient10b {
background-image: linear-gradient
(8deg, hsla(104, 85%, 35%, 1),
hsla(82, 95%, 65%, 1) 40%,
hsla(24, 95%, 45%, 1) 80%)

}

Gradient-10b

Radial Gradients

Radial gradient differ from linear in that they start at a single central point and emanate outwards. They can be useful to make a gradient seem more natural when being used to simulate lighting.
The default is for the first color to start in the (center center) of the element and fade to the end color toward the edge of the element. The fade happens at an equal rate no matter which direction.

The example below shows what the default radial gradient looks like on different sized elements:

.gradient11a {
background-image: radial-gradient
(red, pink)

}

Gradient-11a

.gradient11b {
background-image: radial-gradient
(red, pink)

}


Gradient-11b

Now we can add more colour stops to the radial gradient, as well as differently spacing the colour stops from the default values. Just add the percentage after the colour, with a comma, and the colour will be based at that percentage from the centre.
The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.

The examples below show what the radial gradient looks like when the shape parameter is set to 'circle':

.gradient12a {
background-image: radial-gradient
(circle, #F2994C 15%, #F17B35 33%, #F15E3D 75%, #F04C4B 90%);

}


Gradient-12a

.gradient12b {
background-image: radial-gradient
(circle, #A39CA6 35%, #214574 57%, #45648C 85%, #D8D7D9 95%)

}


Gradient-12b

Browser Support

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property
linear-gradient 26.0
10.0 -webkit-
12.0 10.0 16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.1 -o-
radial-gradient 26.0
10.0 -webkit-
12.0 10.0 16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.6 -o-
repeating-linear-gradient 26.0
10.0 -webkit-
12.0 10.0 16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.1 -o-
repeating-radial-gradient 26.0
10.0 -webkit-
12.0 10.0 16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.6 -o-

Some of the other iopan websites

 

Resources

Some colour & gradient resources on the internet.

img01

colourlovers
Share Your Color Ideas & Inspiration.

COLOURlovers is a creative community with people from around the world.

img01

paletton
In love with colors since 2002.

Paletton.com is a useful tool that teaches harmonious combinations.

img01

uigradients
Beautiful Color Gradients.

Many of the CSS gradients on this site have come from uigradients.

img01

CSS Gradient Generator
Photoshop-like CSS gradient editor

An extreamly useful tool for quickly generating CSS gradients.

Get in touch to start your project