Various CSS Gradient with Examples

Table of Contents

1. Linear Gradient
2. Radial Gradient
3. Conic Gradient
4. Repeating Linear Gradient
5. Gradient with Multiple Color Stops
6. Gradient with Transparency
7. Gradient Text
8. Gradient Border
9. Animated Gradient
10. Gradient Overlay
11. Mesh Gradient
12. Striped Gradient

In this tutorial, we'll explore 12 different CSS gradient examples. Each example comes with step-by-step instructions and code that you can easily copy and use in your projects.

1. Linear Gradient

A simple linear gradient from red to green:

CSS:

.gradient-example.linear {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, #ff0000, #00ff00);
}

2. Radial Gradient

A radial gradient from red to blue:

CSS:

.gradient-example.radial {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, #ff0000, #0000ff);
}

3. Conic Gradient

A conic gradient creating a color wheel effect:

CSS:

.gradient-example.conic {
  width: 200px;
  height: 200px;
  background: conic-gradient(from 0deg, red, yellow, green, blue, purple, red);
  border-radius: 50%;
}

4. Repeating Linear Gradient

A repeating linear gradient creating a striped pattern:

CSS:

.gradient-example.repeating-linear {
  width: 200px;
  height: 200px;
  background: repeating-linear-gradient(45deg, #ff0000, #ff0000 10px, #0000ff 10px, #0000ff 20px);
}

5. Gradient with Multiple Color Stops

A linear gradient with multiple color stops creating a rainbow effect:

CSS:

.gradient-example.multi-stop {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

6. Gradient with Transparency

A linear gradient from solid red to transparent red:

CSS:

.gradient-example.transparent {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0));
}

7. Gradient Text

Text with a gradient background:

CSS:

.gradient-example.text {
  font-size: 36px;
  font-weight: bold;
  background: linear-gradient(to right, #ff0000, #00ff00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

8. Gradient Border

A box with a gradient border:

CSS:

.gradient-example.border {
  width: 180px;
  height: 180px;
  border: 10px solid;
  border-image: linear-gradient(45deg, red, blue) 1;
}

9. Animated Gradient

An animated gradient background:

CSS:

.gradient-example.animated {
  width: 200px;
  height: 200px;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}
@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

10. Gradient Overlay

A gradient overlay on an image:

CSS:

.gradient-example.overlay {
  width: 200px;
  height: 200px;
  background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)), url('images/cat-profile-picture.png');
  background-size: cover;
}

11. Mesh Gradient

A mesh gradient effect:

CSS:

.gradient-example.mesh {
  width: 200px;
  height: 200px;
  background-color: #ff3cac;
  background-image: linear-gradient(225deg, #ff3cac 0%, #784ba0 50%, #2b86c5 100%);
}

12. Striped Gradient

A striped gradient pattern:

CSS:

.gradient-example.striped {
  width: 200px;
  height: 200px;
  background-image: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );
}

Conclusion

These 12 CSS gradient examples showcase the versatility of gradients in creating unique and engaging visual effects. Feel free to use these examples as-is or as inspiration for your own creative gradient styles. Remember to experiment with different colors, angles, and techniques to achieve the perfect look for your projects.