CSS - Gradients

CSSgradientsallows to design custom colors for HTML elements by creating a smooth transition between two or more colors.

What is CSS Gradient?

• In CSS, gradient is a special type of user defined images that can be used for background or borders of element.
• We can set a gradient to background property of any HTML elements using functiongradient(type, color1, color2, color3);
• Zooming a image gradient does not loose it’s quality as this are defined by browsers according to developers code.

Table of Contents

Types of CSS GradientsLinear GradientsRadial GradientsConic GradientsGradients for BordersPositioning Color StopsCreating Hard LinesColor Bands Using GradientsStacked GradientsRelated Functions

Types of CSS Gradients

CSS defines three types of gradients

• Linear Gradient:Goes from left to right, up to down or diagonally.
• Radial Gradient:Start from center to edges.
• Conic Gradient:Revolve around a center point.

Linear GradientRadial GradientConic GradientChoose a gradient for background

Linear Gradients

Thelinear gradientcreates a color band that flows in a single direction, i.e. from left-to-right, top-to-bottom, or at any angle.

Syntax

linear-gradient(direction, color1, color2, ...);

/* Gradient from bottom right to top left */
linear-gradient(to top left, color1, color2, ...);

/* Gradient at an angle 45 degree */
linear-gradient(45deg, red, yellow);

Thedirectionparameter specifies the angle or direction ( [to left | to right] || [to top | to bottom]) of the gradient.

Example

In order to create a basic linear gradient, you just need two colors, which are known ascolor stops. You must have minimum two, but can have more than two as well.

Following example demonstrates this:

Radial Gradients

Aradial gradientis a type of gradient that consists of colors radiating outward from a central point.

In a radial gradient, the colors smoothly transition from one color at the center to another color at the outer edges in a circular or elliptical pattern.

Syntax

radial-gradient(shape size position, color1, color2..);

• Theshapeparameter defines the shape of the gradient (circle or ellipse).
• Thesizeparameter specifies the size of the shape.
• Thepositionparameter sets the center of the gradient

Example

In order to create a basic radial gradient, you just need two colors. The center of the gradient is at 50% 50% mark, by default; where the gradient is elliptical matching with the aspect ratio of its box.

Let us see an example:

Conic Gradients

Aconic gradient, also known as a conical gradient or angular gradient, is a type of gradient in which colors are arranged in a circular or conical pattern, radiating out from a central point in a 360-degree arc.

Syntax

conic-gradient(from 'angle' at 'position', 'color-list')

• position(optional): Specifies the position of the starting point of the gradient. It can be a percentage or a keyword like center.
• angle(optional): Specifies the starting angle of the gradient in degrees.
• color-list: Defines the colors and their positions in the gradient.

Example

In this example we will create a conic gradient pie chart with four different colors, then align gradient at different locations of diagram.

Gradients for Borders

The CSS gradients can be used to create fancy borders as well. You can use the gradients in wide variety to create effects in the border patterns.

Syntax

border-image: linear-gradient('color-list')

You can also use radial and conical gradients for borders.

Example

Here is an example of use of gradients in creation of borders:

Positioning Color Stops

Positioning color stops for gradient allows to control the point at which transition occur for a gradient.

Syntax

linear-gradient(to right, red 10%, pink 30%, blue 60%)

• to right:Specifies the direction of gradient.
• red 10%:Sets the red color to stop at 10% of the gradient
• pink 30%:Sets the pink color to stop at 30% of the gradient.
• blue 60%:Sets the blue color to stop at 60% of the gradient.

Example

Creating Hard Lines

A hard line can be created in between two colors, such that no smooth transition can be seen. This effect can be achieved by carefully positioning color stops in CSS gradients. Check out following example

Example

In this example we will create hard line using gradient function.

Color Bands Using Gradients

In order to create a striped effect, the second color stop for each color is set at the same location as the first color stop for the adjacent color.

Syntax

linear-gradient(to right, red 10%, 
               pink 10% 30%, 
               blue 60% 80%,
               yellow 80%);

Example

In this example will create a multi colored color band.

Stacked Gradients

One gradient can be stacked over other gradients. Just make sure the gradient at the top should not be completely opaque, so that the gradients below it can be seen.

Example

Lets see an example of stacked gradients.

Related Functions

The following table lists all the functions related to CSS gradients:

Gradient TypeDescriptionExamplelinear-gradient()Type of gradient in which colors transition in a straight line from one point to another.Try Itradial-gradient()Type of gradient that consists of colors radiating outward from a central point.Try Itconic-gradient()Type of gradient in which colors are arranged in a circular or conical pattern.Try Itrepeating-linear-gradient()Allows you to create a linear gradient pattern that repeats in a specified direction.Try Itrepeating-radial-gradient()Allows you to create a repeating radial gradient pattern.Try Itrepeating-conic-gradient()Allows you to create a repeating conic gradient pattern.Try It