Register Now


Lost Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

CSS Gradients

CSS Gradients

With CSS gradients we can create transitioning color effects when one or more colors fade into each other. In order to create a gradient, we need to use the “background-image” property. CSS gradients come in three forms.

linear gradients

It is created with the linear-gradient() function. We also need to use at least two color stops. These are the colors that transition or flow into each other.


<div class="gradient"></div>

and the css

.gradient {
   background-image: linear-gradient(red, green);
   width: 350px;
   height: 100px;

by default the direction of the flow will be from top to bottom. The colors can be in any format e.g. hex, rgba etc.

01 css gradient 661859

We can easily change the default direction. To make the gradient to flow to the right, we just need to specify the direction with a keyterm like this: “to right”

background-image: linear-gradient(to right, red, green);

02 css gradient 507428

possible keyterms:

  • to left
  • to bottom
  • to top

we can create a diagonal gradient, if we change the direction like this:

background-image: linear-gradient(to bottom left, red, green);

03 css gradient 132361

Instead of directions we can use angles by specifying a value of degree.

background-image: linear-gradient(157deg, #0592c8, #f4e722);

04 css gradient 471667

We can also use multiple color stops like this:

background-image: linear-gradient(157deg, #0592c8, #f4e722, #e21bc8);

05 css gradient 630138

We can also position the color stops by giving each colors a value of percentage or pixel. If we use percentage, 0% is the starting point, 100% the ending point.

background-image: linear-gradient(157deg, #0592c8 30%, #f4e722 60%, #e21bc8 70%);

06 css gradient 870234

Radial gradient

Radial gradients radiate out from a central point.

background-image: radial-gradient(#0592c8 30%, #f4e722 50%, #e21bc8 80%);

07 css gradient 424801

To position the center, we can use the keyterm “at”

background-image: radial-gradient(at 0% 40%, #0592c8 30%, #f4e722 50%, #e21bc8 80%);

08 css gradient 18374

The default radial gradient has an elliptical shape, but you can change that by using the “circle” term.

background-image: radial-gradient(circle, #0592c8 30%, #f4e722 50%, #e21bc8 80%);

09 css gradient 875106

Conic Gradients

Conic Gradients have a color transition that rotates around a center point.

background-image: conic-gradient(#0592c8, #f4e722, #e21bc8);

10 css gradient 115351

We can set a degree value to each color

background-image: conic-gradient(#0592c8 40deg, #f4e722 120deg, #e21bc8 180deg);

11 css gradient 224181

How to create stripes with css gradient

This is just a quick example:

<div class="gradient"></div>

and the css:

body {
   margin: 0;
   padding: 0;
.gradient {
   background-image: linear-gradient(to right,
      #0592c8 10%,
      #f4e722 10% 20%,
      #e21bc8 20% 30%,
      #292424 30% 40%,
      #0b9b3b 40% 50%,
      #c70a0a 50% 60%,
      #ce8909 60% 70%,
      #360872 70% 80%,
     #eee2e2 80% 90%,
     red 90% 100%
  width: 100%;
  height: 10px;

12 css gradient 478123

Browser compatibility

To make sure the gradients look ok in all browsers we have the following vendor prefixes available:

/* Fallback in case of no support */
background-color: blue;

/* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
-webkit-gradient(linear, left top, right top, from(red), to(#f06d06));

/* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
-webkit-linear-gradient(293deg, #0592c8, #f4e722, #e21bc8);

/* Firefox 3.6 - 15 */
-moz-linear-gradient(157deg, #0592c8, #f4e722, #e21bc8);

/* Opera 11.1 - 12 */
-o-linear-gradient(293deg, #0592c8, #f4e722, #e21bc8);

/* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
linear-gradient(157deg, #0592c8, #f4e722, #e21bc8);

External resources:

Leave a reply