CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Gradients

The gradient is a special type of image that consists of a progressive transition between two or more colors.

Gradient Background

Gradients are available in two styles:

  • Linear Gradients - down / up / left / right / diagonally
  • Radial Gradients - defined by their center

Linear Gradients

Linear gradients are used to arrange two or more colors in linear formats like top to bottom.

The linear-gradient() function sets a linear gradient as the background image of an element.

Syntax:

Using background property:

background: linear-gradient(direction, color-stop, color-stop, ...);

You can also use background-image property to set gradients:

background-image: linear-gradient(direction, color-stop, color-stop, ...);

Linear Gradient - Top to Bottom

The following example shows a linear gradient from top to bottom (This is default):

Run code

Linear Gradient - Left to Right

The following example shows a linear gradient from left to right:

Run code

Linear Gradient - Diagonal

You can also create a gradient diagonally by specifying both the horizontal and vertical starting positions.

The following example shows a linear gradient that starts at top left and goes to bottom right:

Run code

Using Angles

You can also define direction using an angle, instead of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc). The angle is specified as an angle between a horizontal line and the gradient line.

The following example shows how to use angles on linear gradients:

Run code

Using Multiple Color Stops

The following example shows how to create a linear gradient with multiple color stops:

Run code

Repeating a linear-gradient

The repeating-linear-gradient() function is used to repeat linear gradients.

Run code

Radial Gradients

In a radial gradient color emerge from a single point and smoothly spread outward in a circular or elliptical shape.

The radial-gradient() function sets a radial gradient as the background image of an element.

Syntax:
background: radial-gradient(shape size at position, color-stop, color-stop, ...);

Radial Gradient - Evenly Spaced Color Stops

The following example shows a radial gradient with evenly spaced color stops (This is default):

Run code

Radial Gradient - Differently Spaced Color Stops

The following example shows a radial gradient with differently spaced color stops:

Run code

Set Shape

The shape parameter specifies the shape of the gradient's ending shape. It can be circle or ellipse. The default value is ellipse.

The following example shows a radial gradient with the shape of a circle:

Run code

Use of Different Size Keywords

The size parameter defines the size of the gradient. It can take four values:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner
Run code

Repeating a radial-gradient

The repeating-radial-gradient() function is used to repeat radial gradients.

Run code

CSS Gradient Examples

The following section contains collection of few gradients that you can use as content backdrops in any part of your website:


CSS Gradient Functions

Function Description
linear-gradient() Sets a linear gradient as the background image
radial-gradient() Sets a radial gradient as the background image
repeating-linear-gradient() Repeats a linear gradient
repeating-radial-gradient() Repeats a radial gradient