Background Repeat Gradient

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

Quick Code

Copy to clipboard <div style="background-image: repeating-linear-gradient(to right, #00a8eb, white);">Text Goes Here</div>

## Introduction

The background-repeat property in CSS is used to repeat the background image both horizontally and vertically. It also decides whether the background-image will be repeated or not.

## Background — Image repeating Gradient

You can also add Background-image with repeating Gradients, giving the same result.

### Linear Gradient (with div)

Linear gradients go from up to down, left to right, vice versa, vice versa. The code is as follows -

```
<div style="background-image: repeating-linear-gradient(to left, #f4f4e5, #d2d2d2);">Text goes here.</div>
```

You can change the amount of colors, or the direction it points. By replacing the 'to left' with to top right, or another direction specification, you change the direction the gradient goes in. By changing the codes starting with **#**, you change the colors in the gradient.

#### Free Patterns

**Black/Gray:**

Text goes here

Code:
```
<div style="background-image: repeating-linear-gradient(to right, black, white); color: white;">Text goes here</div>
```

**White/Gray:**

Text goes here

Code:
```
<div style="background-image: repeating-linear-gradient(to right, #f4f4e5 0%, #d2d2d2 100%)">Text goes here</div>
```

**LightPink/LightGreen:**

Text goes here

Code:
```
<div style="background-image: repeating-linear-gradient(to right, lightpink 0%, lightgreen 100%)">Text goes here</div>
```

**Blue/White:**

Text goes here

Code:
```
<div style="background: linear-gradient(to right, #b0e0e6 0%, white 100%)">Text goes here</div>
```

**PastelGreen/LightGreen:**

Text goes here

Code:
```
<div style="background-image: repeating-linear-gradient(to right, #aef5b7 0%, #e2f5ae 100%)">Text goes here</div>
```

**Red/Orange:**

Text goes here

Code:
```
<div style="background-image: repeating-linear-gradient(to right, #e55d5d 0%, #f2cf79 100%)">Text goes here</div>
```

**Dark/LightPurple:**

Text goes here

Code:
```
<div style="background-image: repeating-linear-gradient(to right, #5750a5 0%, #cfc4ff 100%); color:white;">Text goes here</div>
```

**Yellow/Green:**

Text goes here

Code:
```
<div style="background-image: repeating-linear-gradient(to right, #f1f44b 0%, #9ce359 100%)">Text goes here</div>
```

**Magenta/DarkCyan:**

Text goes here

Code:
```
<div style="background-image: repeating-linear-gradient(to right, magenta, darkcyan)">Text goes here</div>
```

**MediumSpringGreen/SpringGreen:**

Text goes here

Code:
```
<div style="background: linear-gradient(to right, mediumspringgreen, springgreen)">Text goes here</div>
```

**DeepPink/Lime/Cyan**

Text goes here

Code:
```
<div style="background: linear-gradient(to right, deeppink, lime, cyan)">Text goes here</div>
```

**NeonPurple/NeonPink**

Text goes here

Code:
```
<div style="background: linear-gradient(to right, #b026ff, #ff44cc);color:white">Text goes here</div>
```

### Radial Gradient (with div)

A radial gradient has circular patterns. Below are just a few examples; feel free to alter them to your liking! The code is as follows -

```
<div style="background-image: repeating-radial-gradient(color, color, color);">Text goes here.  You can change the amount of colors, or the direction it points.</div>
```

#### Free Patterns

**Silver/Gray:**

Text goes here

Code:
```
<div style="background-image: repeating-radial-gradient(gray,silver);">Text goes here</div>
```

**Purple/Violet/Pink:**

Text goes here

Code:
```
<div style="background-image: repeating-radial-gradient(purple,darkviolet,deeppink);color:white;">Text goes here</div>
```

**Blue/DarkBlue:**

Text goes here

Code:
```
<div style="background-image: repeating-radial-gradient(blue,darkblue);color:white;">Text goes here</div>
```

**Aqua/Yellow:**

Text goes here

Code:
```
<div style="background-image: repeating-radial-gradient(aqua, yellow);">Text goes here</div>
```

**Lime/Cyan:**

Text goes here

Code:
```
<div style="background-image: repeating-radial-gradient(lime, cyan);">Text goes here</div>
```

**Orange/Black:**

Text goes here

Code:
```
<div style="background-image: repeating-radial-gradient(orange,black);color:white">Text Goes Here</div>
```

### Conic Gradient (with div)

A conic gradient has conic patterns. Below are just a few examples; feel free to alter them to your liking! The code is as follows -

```
<div style="background-image: repeating-conic-gradient(color, color, color);">Text goes here.  You can change the amount of colors, or the distance between them. </div>
```

#### Free Patterns

**Black/Gray:**

Text goes here

Code:
```
<div style="background-image: repeating-conic-gradient(black, white); color: white;">Text goes here</div>
```

**White/Gray:**

Text goes here

Code:
```
<div style="background-image: repeating-conic-gradient(#f4f4e5 0%, #d2d2d2 100%)">Text goes here</div>
```

**Azure/Powderblue**

Text goes here

Code:
```
<div style="background-image: repeating-conic-gradient(azure,powderblue)">Text goes here</div>
```

**Wheat/Tan**

Text goes here

Code:
```
<div style="background-image: repeating-conic-gradient(wheat,tan)">Text goes here</div>
```

## Background — Repeat Styles

background-repeat: repeat;

background-repeat: space;

background-repeat: round;

background-repeat: no-repeat;

### Horizontal & Vertical

background-repeat: repeat space;

background-repeat: repeat repeat;

background-repeat: round space;

background-repeat: no-repeat round;