How to Create a Gradient Background in CSS (with examples)

//How to Create a Gradient Background in CSS (with examples)

How to Create a Gradient Background in CSS (with examples)

 

A gradient is a progression from one color to the other. It can be used to create smooth looking graphics and is supported by pure CSS.

In this tutorial we cover how to gradient background in css and html. No need for images.

Choose an element

You can give a gradient to any element, so make sure you select your element well. Please take into account:

The gradients acts like an image

You can use a gradient for a bunch of applications, but make sure you pick the right element/pseudo element. If you want to use it for an overlay for example, use a ::before and give it an opacity.

Types of gradients

There are a number of gradient types:

  • Linear gradient
  • Radial gradient
  • Repeating gradient (both linear and radial)

A linear gradient progresses from one side of an element to another in a linear fashion. Like a sunrise going from bright at the horizon to darker high in the sky.

A radial gradient starts from a point and radiates outward. Like the sun being bright in the center and getting less bright the farther you get from the center.

A repeating gradient does not progress from one point to the end of an element, but repeats. For example a radial repeating gradient might look like the ripples caused by dropping a pebble in apont.

Gradient properties

You can specify a number of properties for your gradient:

  • Color points
    • Progress from red to orange to white
  • Direction
    • Top to bottom
  • Angle (instead of direction)
    • 90deg (meaning 90 degrees)
  • Transparency
    • Using color in tgba with opacity, for example black with half opacity: rgba(255,255,255,0.5)
  • Repeating
    • Whether and how often to repeat the gradient
  • Shape (radial)
    • circle or ellipse
  • Size (radial)
    • 30% 20%

Browser prefixes

To make sure your gradients work well with all browsers, use these browser prefixes:

background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */

Linear gradient examples

Blue and white gradient from left to right:

.gradient {
background: linear-gradient(to right, blue, white);
}

Selection_001

Blue and white gradient from left top to right bottom:

.gradient {
background: linear-gradient(to right bottom, blue, white);
}

Selection_002

Blue and white gradient from left  to right using degrees:

.gradient {
background: linear-gradient(90deg, blue, white);
}

Selection_001

Black square with transparency using gradient:

.gradient {
background: linear-gradient(to left, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
}

Selection_003

Repeating blue to white gradient from left to right 10 times:

.gradient {
background: repeating-linear-gradient(to left, blue, white 10%);
}

Selection_004

Gradient from red to white to blue from bottom to top:

.gradient {
background: repeating-linear-gradient(to top, blue, white, red);
}

Oh look, it’s a Dutch flag!

Selection_005

Radial gradient examples

Gradient from center, blue to white:

.gradient {
background: radial-gradient(blue, white);
}

Selection_006

Radial gradient with multiple colors from center  to outside:

.gradient {
background: radial-gradient(blue, white, red);
}

Selection_007

Circular gradient in an element without a 1:1 ratio:

.gradient {
background: radial-gradient(circle, blue, white, red);
}

Selection_008

Gradient pulling the center vertically and squashing horizontally:

.gradient {
background: radial-gradient(40% 90%, blue, red);
}

Selection_011

Repeating circular gradient 10 times in dutch flag colors:

.gradient {
background: repeating-radial-gradient(blue, white, red 10%);
}

Selection_012

By | 2018-07-24T14:31:18+00:00 May 1st, 2015|0 Comments