Popular Tags

CSS Gradients: 7 Examples of Usage

This article covers the examples of usage of the linear-gradient() function, including gradient borders, icons, buttons, text, underlining, list bullets, and a shimmering background.

CSS Gradients: 7 Examples of Usage

Contents

  1. Gradient Border
  2. Gradient Icon
  3. Gradient Button
  4. Gradient Text
  5. Gradient Underlining
  6. Gradient List Bullets
  7. Shimmering Gradient Background

Linear-gradient() is one of the functions that allow displaying smooth transitions between two or more colors. To create a linear gradient you must define a direction (to right / to left /  to top / to bottom / to bottom right) and at least two color stops. For example:

    
        
background-image: linear-gradient(to right, blue, pink);
    

Instead of the direction, you can specify an angle, for example:

    
        
background-image: linear-gradient(-90deg, blue, pink);
    

You can use the Webgradients.com website to find ready-to-use CSS gradient backgrounds with CSS code.

Gradient Border

Gradient Border

To create a gradient border, set a linear gradient background, position the background relative to the border box with the background-origin: border-box; property, and set the limits of extending the background with the background-clip property.

    
        
.gradient-border {
  width: 400px;
  height: 100px;
  border: double 8px transparent;
  border-radius: 80px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f69ec4,#32557f);
  background-origin: border-box;
  background-clip: content-box, border-box;
}
    

Gradient Icon

Gradient Icon

Here is an example of creating a gradient icon with SVG (Scalable Vector Graphics) image. First, add an SVG element in your HTML page. It should define a <linearGradient/>:

    
        
<svg class="gradient-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15">
    <path d="M7.5,0.5c3.9,0,7,3.1,7,7c0,3.9-3.1,7-7,7c-3.9,0-7-3.1-7-7l0,0C0.5,3.6,3.6,0.5,7.5,0.5 C7.5,0.5,7.5,0.5,7.5,0.5L7.5,0.5L7.5,0.5z M6.1,4.7v5.6l4.2-2.8L6.1,4.7z" />
    <linearGradient id="icon" x2="1" y2="1">
        <stop offset="0%" stop-color="#f69ec4" />
        <stop offset="50%" stop-color="#7eb4e2" />
        <stop offset="100%" stop-color="#32557f" />
    </linearGradient>
</svg>
    

You can then use this gradient in your CSS:

    
        
.gradient-icon {
  height: 200px;
  width: 200px;
  fill: url(#icon) #447799;
}
    

Gradient Button

Gradient Button

To create a gradient button, simply use the linear-gradient() function to define its background. You can then add an image to a pseudo-element.

    
        
button {
  user-select: none;
  outline: none;
  border: none;
  cursor: pointer;
  border-radius: 10px;

  width: 100px;
  height: 100px;
  position: relative;
  background-position: 100px 100px;
  background-repeat: no-repeat;
  background: linear-gradient(to left, #f69ec4 0%, #32557f 100%);

  &:before {
    content: "";
    position: absolute;
    top: 10px; left: 10px;
    width: 80px; height: 80px;
    background: url(img/search.png) no-repeat;
  }
}
    

Gradient Text

Gradient Text

The background-clip: text; property allows the background to be clipped to the foreground text. The text-fill-color: transparent; property makes the characters of text transparent. And the background itself is set with the background: linear-gradient(); property.

    
        
.gradient-text {
  font-size: 100px;
  background: linear-gradient(to bottom, #f69ec4 0%, #32557f 100%);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color:transparent;
}
    

Gradient Underlining

Gradient Underlining

This example uses the CSS rules for the text from the previous example. To create a gradient underlining, set the background linear gradient, position and size, and repeat it horizontally (repeat-x).

    
        
.gradient-text span {
  background: linear-gradient(to left, #f69ec4 0%, #32557f 100%);
  background-position: 0 100%;
  background-size: 100% 6px;
  background-repeat: repeat-x;
}
    

Gradient List Bullets

Gradient List Bullets

To create gradient list bullets, simply apply the linear-gradient() function to the <li> elements of your list.

    
        
ul li {
  list-style-type: none;
  margin-bottom: 15px;
  background: linear-gradient(45deg, #f69ec4, #32557f);
  height: 24px;
  width: 24px;
  border-radius: 50%;

  span {
    margin-left: 30px;
  }
}
    

Shimmering Gradient Background

With CSS gradients, you can even create animated shimmering effects. Here is an example: