How To Make A Gradient Background In Html

Using CSS gradients

CSS gradients are represented by the <gradient> information type, a special type of <prototype> made of a progressive transition betwixt 2 or more colors. You can choose between 3 types of gradients: linear (created with the linear-slope() function), radial (created with the radial-slope() function), and conic (created with the conic-gradient() function). You can as well create repeating gradients with the repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-slope() functions.

Gradients can be used anywhere y'all would use an <image>, such as in backgrounds. Because gradients are dynamically generated, they can negate the need for the raster prototype files that traditionally were used to reach similar effects. In addition, because gradients are generated past the browser, they look better than raster images when zoomed in, and tin be resized on the fly.

We'll start by introducing linear gradients, and so innovate features that are supported in all gradient types using linear gradients as the case, so move on to radial, conic and repeating gradients

Using linear gradients

A linear slope creates a band of colors that progress in a straight line.

A basic linear gradient

To create the well-nigh basic type of slope, all you demand is to specify two colors. These are chosen colour stops. You must have at to the lowest degree ii, but yous tin can accept as many equally you want.

                                                                                    <div                      class                                              =                        "uncomplicated-linear"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    120px;                    height                    :                    120px;                    }

                                      .uncomplicated-linear                    {                    background                    :                    linear-gradient                    (blueish,                    pinkish)                    ;                    }

Changing the direction

By default, linear gradients run from superlative to bottom. Yous can alter their rotation by specifying a management.

                                                                                    <div                      grade                                              =                        "horizontal-gradient"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    120px;                    height                    :                    120px;                    }

                                      .horizontal-gradient                    {                    background                    :                    linear-gradient                    (to right,                    blue,                    pink)                    ;                    }

Diagonal gradients

You lot can even make the gradient run diagonally, from corner to corner.

                                                                                    <div                      class                                              =                        "diagonal-gradient"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    200px;                    pinnacle                    :                    100px;                    }

                                      .diagonal-slope                    {                    background                    :                    linear-gradient                    (to bottom right,                    blueish,                    pink)                    ;                    }

Using angles

If you desire more than control over its direction, you tin can requite the gradient a specific angle.

                                                                                    <div                      class                                              =                        "angled-gradient"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    120px;                    height                    :                    120px;                    }

                                      .angled-gradient                    {                    background                    :                    linear-gradient                    (70deg,                    blue,                    pink)                    ;                    }

When using an angle, 0deg creates a vertical gradient running bottom to height, 90deg creates a horizontal gradient running left to correct, and and so on in a clockwise direction. Negative angles run in the counterclockwise direction.

Declaring colors & creating effects

All CSS gradient types are a range of position-dependent colors. The colors produced past CSS gradients can vary continuously with position, producing smooth color transitions. It is likewise possible to create bands of solid colors, and hard transitions betwixt two colors. The following are valid for all slope functions:

Using more than two colors

Yous don't have to limit yourself to two colors—y'all may apply as many as you lot like! By default, colors are evenly spaced along the slope.

                                                                                    <div                      class                                              =                        "car-spaced-linear-gradient"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    120px;                    peak                    :                    120px;                    }

                                      .auto-spaced-linear-gradient                    {                    background                    :                    linear-gradient                    (ruby,                    yellow,                    blueish,                    orange)                    ;                    }

Positioning color stops

You don't take to leave your color stops at their default positions. To fine-tune their locations, you can requite each ane zero, one, or two percentage or, for radial and linear gradients, absolute length values. If you specify the location every bit a pct, 0% represents the starting bespeak, while 100% represents the ending point; still, yous tin can use values outside that range if necessary to get the issue you want. If you go out a location unspecified, the position of that particular color terminate will be automatically calculated for you, with the first colour stop being at 0% and the last color cease being at 100%, and whatsoever other colour stops being one-half way between their adjacent colour stops.

                                                                                    <div                      form                                              =                        "multicolor-linear"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    120px;                    summit                    :                    120px;                    }

                                      .multicolor-linear                    {                    background                    :                    linear-gradient                    (to left,                    lime 28px,                    blood-red 77%,                    cyan)                    ;                    }

Creating hard lines

To create a difficult line between ii colors, creating a stripe instead of a gradual transition, adjacent color stops can be set to the same location. In this example, the colors share a color stop at the 50% marker, halfway through the gradient:

                                                                                    <div                      grade                                              =                        "striped"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    120px;                    summit                    :                    120px;                    }

                                      .striped                    {                    background                    :                    linear-gradient                    (to lesser left,                    cyan 50%,                    palegoldenrod 50%)                    ;                    }

Gradient hints

By default, the slope transitions evenly from one color to the next. Yous tin include a color-hint to move the midpoint of the transition value to a certain signal along the slope. In this case, we've moved the midpoint of the transition from the 50% mark to the x% mark.

                                                                                    <div                      class                                              =                        "colour-hint"                                            >                                                                                      </div                      >                                                                                      <div                      class                                              =                        "simple-linear"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    120px;                    summit                    :                    120px;                    float                    :                    left;                    margin-right                    :                    10px;                    }

                                      .color-hint                    {                    groundwork                    :                    linear-slope                    (blueish,                    ten%,                    pink)                    ;                    }                    .simple-linear                    {                    groundwork                    :                    linear-slope                    (bluish,                    pink)                    ;                    }

Creating color bands & stripes

To include a solid, non-transitioning color area within a gradient, include two positions for the color stop. Color stops can have 2 positions, which is equivalent to 2 consecutive color stops with the aforementioned colour at different positions. The color will attain full saturation at the first color end, maintain that saturation through to the second color stop, and transition to the adjacent color finish'due south color through the adjacent color stop's showtime position.

                                                                                    <div                      class                                              =                        "multiposition-stops"                                            >                                                                                      </div                      >                                                                                      <div                      class                                              =                        "multiposition-stop2"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    120px;                    height                    :                    120px;                    bladder                    :                    left;                    margin-correct                    :                    10px;                    box-sizing                    :                    border-box;                    }

                                      .multiposition-stops                    {                    groundwork                    :                    linear-gradient                    (to left,                    lime 20%,                    red 30%,                    cherry-red 45%,                    cyan 55%,                    cyan seventy%,                    yellow 80%                    )                    ;                    background                    :                    linear-gradient                    (to left,                    lime 20%,                    carmine 30% 45%,                    cyan 55% 70%,                    yellow eighty%                    )                    ;                    }                    .multiposition-stop2                    {                    background                    :                    linear-gradient                    (to left,                    lime 25%,                    red 25%,                    cherry-red 50%,                    cyan 50%,                    cyan 75%,                    yellowish 75%                    )                    ;                    background                    :                    linear-gradient                    (to left,                    lime 25%,                    reddish 25% 50%,                    cyan 50% 75%,                    yellowish 75%                    )                    ;                    }

In the offset instance above, the lime goes from the 0% mark, which is implied, to the 20% mark, transitions from lime to red over the next 10% of the width of the gradient, achieve solid red at the thirty% mark, and staying solid scarlet upwards until 45% through the gradient, where it fades to cyan, being fully cyan for fifteen% of the gradient, then on.

In the 2d instance, the second color end for each colour is at the same location every bit the first color finish for the adjacent color, creating a striped event.

In both examples, the gradient is written twice: the start is the CSS Images Level 3 method of repeating the color for each stop and the second example is the CSS Images Level 4 multiple color stop method of including ii color-finish-lengths in a linear-colour-stop declaration.

Controlling the progression of a gradient

Past default, a gradient evenly progresses betwixt the colors of two adjacent color stops, with the midpoint between those ii color stops being the midpoint color value. Y'all can command the interpolation, or progression, between two color stops by including a color hint location. In this instance, the color reaches the midpoint between lime and cyan 20% of the mode through the gradient rather than fifty% of the fashion through. The second example does not contain the hint to highlight the divergence the color hint can make:

                                                                                    <div                      class                                              =                        "colorhint-gradient"                                            >                                                                                      </div                      >                                                                                      <div                      class                                              =                        "regular-progression"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    120px;                    peak                    :                    120px;                    float                    :                    left;                    margin-right                    :                    10px;                    box-sizing                    :                    border-box;                    }

                                      .colorhint-gradient                    {                    background                    :                    linear-slope                    (to top,                    lime,                    20%,                    cyan)                    ;                    }                    .regular-progression                    {                    groundwork                    :                    linear-gradient                    (to pinnacle,                    lime,                    cyan)                    ;                    }

Overlaying gradients

Gradients support transparency, so you can stack multiple backgrounds to reach some pretty fancy effects. The backgrounds are stacked from summit to bottom, with the beginning specified being on superlative.

                                                                                    <div                      class                                              =                        "layered-image"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    300px;                    pinnacle                    :                    150px;                    }

                                      .layered-epitome                    {                    background                    :                    linear-gradient                    (to correct,                    transparent,                    mistyrose)                    ,                                          url                      (                      "critters.png"                      )                                        ;                    }

Stacked gradients

You tin even stack gradients with other gradients. As long as the top gradients aren't entirely opaque, the gradients below will all the same be visible.

                                                                                    <div                      course                                              =                        "stacked-linear"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    200px;                    height                    :                    200px;                    }

                                      .stacked-linear                    {                    groundwork                    :                    linear-gradient                    (217deg,                    rgba                    (255,0,0,.8)                    ,                    rgba                    (255,0,0,0)                    lxx.71%)                    ,                    linear-gradient                    (127deg,                    rgba                    (0,255,0,.eight)                    ,                    rgba                    (0,255,0,0)                    70.71%)                    ,                    linear-gradient                    (336deg,                    rgba                    (0,0,255,.viii)                    ,                    rgba                    (0,0,255,0)                    70.71%)                    ;                    }

Using radial gradients

Radial gradients are like to linear gradients, except that they radiate out from a central point. Yous can dictate where that key point is. You tin also make them round or elliptical.

A bones radial gradient

As with linear gradients, all you demand to create a radial gradient are two colors. By default, the center of the slope is at the 50% 50% marker, and the gradient is elliptical matching the aspect ratio of information technology'south box:

                                                                                    <div                      grade                                              =                        "unproblematic-radial"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    240px;                    height                    :                    120px;                    }

                                      .uncomplicated-radial                    {                    background                    :                    radial-gradient                    (carmine,                    blue)                    ;                    }

Positioning radial color stops

Over again like linear gradients, you tin position each radial color stop with a percent or absolute length.

                                                                                    <div                      course                                              =                        "radial-gradient"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    120px;                    height                    :                    120px;                    }

                                      .radial-gradient                    {                    background                    :                    radial-gradient                    (red 10px,                    yellow xxx%,                    #1e90ff l%)                    ;                    }

Positioning the middle of the gradient

You can position the centre of the gradient with keyterms, percentage, or accented lengths, length and pct values repeating if only 1 is present, otherwise in the club of position from the left and position from the top.

                                                                                    <div                      class                                              =                        "radial-slope"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    120px;                    tiptop                    :                    240px;                    }

                                      .radial-gradient                    {                    background                    :                    radial-slope                    (at 0% 30%,                    red 10px,                    yellow 30%,                    #1e90ff fifty%)                    ;                    }

Sizing radial gradients

Unlike linear gradients, you can specify the size of radial gradients. Possible values include closest-corner, closest-side, uttermost-corner, and uttermost-side, with farthest-corner beingness the default. Circles can likewise exist sized with a length, and ellipses a length or percentage.

Example: closest-side for ellipses

This case uses the closest-side size value, which means the size is set up by the altitude from the starting point (the center) to the closest side of the enclosing box.

                                                                                    <div                      class                                              =                        "radial-ellipse-side"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    240px;                    top                    :                    100px;                    }

                                      .radial-ellipse-side                    {                    background                    :                    radial-slope                    (ellipse closest-side,                    red,                    yellow 10%,                    #1e90ff 50%,                    beige)                    ;                    }

Case: farthest-corner for ellipses

This case is similar to the previous one, except that its size is specified as farthest-corner, which sets the size of the slope by the altitude from the starting point to the farthest corner of the enclosing box from the starting betoken.

                                                                                    <div                      class                                              =                        "radial-ellipse-far"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    240px;                    meridian                    :                    100px;                    }

                                      .radial-ellipse-far                    {                    background                    :                    radial-slope                    (ellipse farthest-corner at 90% 90%,                    cherry,                    yellow 10%,                    #1e90ff 50%,                    biscuit)                    ;                    }

Example: closest-side for circles

This example uses closest-side, which makes the circumvolve's size to be the distance between the starting point (the center) and the closest side. The circumvolve'southward radius is the distance between the centre of the gradient and the closest edge, which due to the positioning of the 25% from the top and 25% from the bottom, is closest to the bottom, since the tiptop in this case is narrower than the width.

                                                                                    <div                      class                                              =                        "radial-circle-close"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    240px;                    height                    :                    120px;                    }

                                      .radial-circle-close                    {                    background                    :                    radial-gradient                    (circle closest-side at 25% 75%,                    red,                    yellow ten%,                    #1e90ff 50%,                    beige)                    ;                    }

Instance: length or per centum for ellipses

For ellipses simply, y'all can size the ellipse using a length or percentage. The first value represents the horizontal radius, the 2d the vertical radius, where you use a pct this corresponds to the size of the box in that dimension. In the beneath example I have used a percentage for the horizontal radius.

                                                                                    <div                      class                                              =                        "radial-ellipse-size"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    240px;                    height                    :                    120px;                    }

                                      .radial-ellipse-size                    {                    background                    :                    radial-gradient                    (ellipse l% 50px,                    red,                    yellow 10%,                    #1e90ff 50%,                    beige)                    ;                    }

Example: length for circles

For circles the size may be given as a <length>, which is the size of the circle.

                                                                                    <div                      grade                                              =                        "radial-circle-size"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    240px;                    height                    :                    120px;                    }

                                      .radial-circle-size                    {                    background                    :                    radial-gradient                    (circle 50px,                    red,                    yellow 10%,                    #1e90ff l%,                    beige)                    ;                    }

Stacked radial gradients

Merely like linear gradients, you lot can also stack radial gradients. The starting time specified is on top, the last on the bottom.

                                                                                    <div                      course                                              =                        "stacked-radial"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    200px;                    tiptop                    :                    200px;                    }

                                      .stacked-radial                    {                    groundwork                    :                    radial-gradient                    (circle at l% 0,                    rgba                    (255,0,0,.5)                    ,                    rgba                    (255,0,0,0)                    70.71%)                    ,                    radial-gradient                    (circumvolve at half dozen.7% 75%,                    rgba                    (0,0,255,.five)                    ,                    rgba                    (0,0,255,0)                    seventy.71%)                    ,                    radial-gradient                    (circle at 93.3% 75%,                    rgba                    (0,255,0,.five)                    ,                    rgba                    (0,255,0,0)                    lxx.71%)                    beige;                    border-radius                    :                    50%;                    }

Using conic gradients

The conic-slope() CSS function creates an image consisting of a gradient with colour transitions rotated around a eye betoken (rather than radiating from the center). Example conic gradients include pie charts and color wheels, merely they can also be used for creating checker boards and other interesting effects.

The conic-gradient syntax is like to the radial-gradient syntax, but the color-stops are placed around a gradient arc, the circumference of a circle, rather than on the gradient line emerging from the heart of the gradient, and the color-stops are percentages or degrees: absolute lengths are not valid.

In a radial gradient, the colors transition from the eye of an ellipse, outward, in all directions. With conic gradients, the colors transition as if spun around the center of a circle, starting at the superlative and going clockwise. Similar to radial gradients, you can position the middle of the slope. Like to linear gradients, you can alter the slope bending.

A basic conic gradient

As with linear and radial gradients, all y'all need to create a conic gradient are two colors. By default, the middle of the slope is at the 50% 50% mark, with the offset of the gradient facing upwards:

                                                                                    <div                      course                                              =                        "simple-conic"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    120px;                    pinnacle                    :                    120px;                    }

                                      .uncomplicated-conic                    {                    background                    :                    conic-gradient                    (red,                    blue)                    ;                    }

Positioning the conic center

Similar radial gradients, yous can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"

                                                                                    <div                      grade                                              =                        "conic-gradient"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    120px;                    height                    :                    120px;                    }

                                      .conic-slope                    {                    background                    :                    conic-slope                    (at 0% 30%,                    carmine x%,                    yellow 30%,                    #1e90ff 50%)                    ;                    }

Changing the angle

By default, the unlike color stops y'all specify are spaced equidistantly around the circle. You tin can position the starting bending of the conic slope using the "from" keyword at the commencement followed by an angle or a length, and you can specify different positions for the colors stops by including an bending or length after them.

                                                                                    <div                      form                                              =                        "conic-gradient"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    120px;                    elevation                    :                    120px;                    }

                                      .conic-gradient                    {                    background                    :                    conic-slope                    (from 45deg,                    red,                    orange l%,                    yellow 85%,                    green)                    ;                    }

Using repeating gradients

The linear-gradient(), radial-gradient(), and conic-gradient() functions don't support automatically repeated color stops. However, the repeating-linear-gradient(), repeating-radial-slope(), and repeating-conic-gradient() functions are available to offering this functionality.

The size of the gradient line or arc that repeats is the length between the first color stop value and the final color cease length value. If the beginning colour cease just has a color and no color stop length, the value defaults to 0. If the last color stop has simply a colour and no color stop length, the value defaults to 100%. If neither is declared, the gradient line is 100% meaning the linear and conic gradients volition not repeat and the radial gradient volition just repeat if the radius of the slope is smaller than the length between the center of the slope and the farthest corner. If the first colour finish is declared, and the value is greater than 0, the slope volition echo, equally the size of the line or arc is the deviation between the start color terminate and last colour stop is less than 100% or 360 degrees.

Repeating linear gradients

This example uses repeating-linear-gradient() to create a gradient that progresses repeatedly in a straight line. The colors get cycled over again as the gradient repeats. In this case the slope line is 10px long.

                                                                                    <div                      form                                              =                        "repeating-linear"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    120px;                    height                    :                    120px;                    }

                                      .repeating-linear                    {                    background                    :                    repeating-linear-slope                    (-45deg,                    cherry,                    scarlet 5px,                    blue 5px,                    bluish 10px)                    ;                    }

Multiple repeating linear gradients

Similar to regular linear and radial gradients, you can include multiple gradients, ane on summit of the other. This only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you lot include unlike background-sizes, optionally with unlike groundwork-position holding values, for each gradient paradigm. Nosotros are using transparency.

In this instance the gradient lines are 300px, 230px, and 300px long.

                                                                                    <div                      class                                              =                        "multi-repeating-linear"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    600px;                    superlative                    :                    400px;                    }

                                      .multi-repeating-linear                    {                    background                    :                    repeating-linear-gradient                    (190deg,                    rgba                    (255,                    0,                    0,                    0.5)                    40px,                    rgba                    (255,                    153,                    0,                    0.5)                    80px,                    rgba                    (255,                    255,                    0,                    0.v)                    120px,                    rgba                    (0,                    255,                    0,                    0.5)                    160px,                    rgba                    (0,                    0,                    255,                    0.5)                    200px,                    rgba                    (75,                    0,                    130,                    0.5)                    240px,                    rgba                    (238,                    130,                    238,                    0.5)                    280px,                    rgba                    (255,                    0,                    0,                    0.5)                    300px)                    ,                    repeating-linear-gradient                    (-190deg,                    rgba                    (255,                    0,                    0,                    0.5)                    30px,                    rgba                    (255,                    153,                    0,                    0.5)                    60px,                    rgba                    (255,                    255,                    0,                    0.5)                    90px,                    rgba                    (0,                    255,                    0,                    0.5)                    120px,                    rgba                    (0,                    0,                    255,                    0.5)                    150px,                    rgba                    (75,                    0,                    130,                    0.5)                    180px,                    rgba                    (238,                    130,                    238,                    0.5)                    210px,                    rgba                    (255,                    0,                    0,                    0.v)                    230px)                    ,                    repeating-linear-gradient                    (23deg,                    red 50px,                    orange 100px,                    yellow 150px,                    green 200px,                    blue 250px,                    indigo 300px,                    violet 350px,                    red 370px)                    ;                    }

Plaid gradient

To create plaid nosotros include several overlapping gradients with transparency. In the first background declaration we listed every color end separately. The second background belongings declaration using the multiple position color finish syntax:

                                                                                    <div                      form                                              =                        "plaid-gradient"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    200px;                    height                    :                    200px;                    }

                                      .plaid-gradient                    {                    groundwork                    :                    repeating-linear-slope                    (90deg,                    transparent,                    transparent 50px,                    rgba                    (255,                    127,                    0,                    0.25)                    50px,                    rgba                    (255,                    127,                    0,                    0.25)                    56px,                    transparent 56px,                    transparent 63px,                    rgba                    (255,                    127,                    0,                    0.25)                    63px,                    rgba                    (255,                    127,                    0,                    0.25)                    69px,                    transparent 69px,                    transparent 116px,                    rgba                    (255,                    206,                    0,                    0.25)                    116px,                    rgba                    (255,                    206,                    0,                    0.25)                    166px)                    ,                    repeating-linear-gradient                    (0deg,                    transparent,                    transparent 50px,                    rgba                    (255,                    127,                    0,                    0.25)                    50px,                    rgba                    (255,                    127,                    0,                    0.25)                    56px,                    transparent 56px,                    transparent 63px,                    rgba                    (255,                    127,                    0,                    0.25)                    63px,                    rgba                    (255,                    127,                    0,                    0.25)                    69px,                    transparent 69px,                    transparent 116px,                    rgba                    (255,                    206,                    0,                    0.25)                    116px,                    rgba                    (255,                    206,                    0,                    0.25)                    166px)                    ,                    repeating-linear-gradient                    (-45deg,                    transparent,                    transparent 5px,                    rgba                    (143,                    77,                    63,                    0.25)                    5px,                    rgba                    (143,                    77,                    63,                    0.25)                    10px)                    ,                    repeating-linear-gradient                    (45deg,                    transparent,                    transparent 5px,                    rgba                    (143,                    77,                    63,                    0.25)                    5px,                    rgba                    (143,                    77,                    63,                    0.25)                    10px)                    ;                    background                    :                    repeating-linear-gradient                    (90deg,                    transparent 0 50px,                    rgba                    (255,                    127,                    0,                    0.25)                    50px 56px,                    transparent 56px 63px,                    rgba                    (255,                    127,                    0,                    0.25)                    63px 69px,                    transparent 69px 116px,                    rgba                    (255,                    206,                    0,                    0.25)                    116px 166px)                    ,                    repeating-linear-slope                    (0deg,                    transparent 0 50px,                    rgba                    (255,                    127,                    0,                    0.25)                    50px 56px,                    transparent 56px 63px,                    rgba                    (255,                    127,                    0,                    0.25)                    63px 69px,                    transparent 69px 116px,                    rgba                    (255,                    206,                    0,                    0.25)                    116px 166px)                    ,                    repeating-linear-gradient                    (-45deg,                    transparent 0 5px,                    rgba                    (143,                    77,                    63,                    0.25)                    5px 10px)                    ,                    repeating-linear-slope                    (45deg,                    transparent 0 5px,                    rgba                    (143,                    77,                    63,                    0.25)                    5px 10px)                    ;                    }

Repeating radial gradients

This example uses repeating-radial-slope() to create a gradient that radiates repeatedly from a central bespeak. The colors get cycled over and over equally the gradient repeats.

                                                                                    <div                      class                                              =                        "repeating-radial"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    120px;                    pinnacle                    :                    120px;                    }

                                      .repeating-radial                    {                    background                    :                    repeating-radial-gradient                    (black,                    black 5px,                    white 5px,                    white 10px)                    ;                    }

Multiple repeating radial gradients

                                                                                    <div                      class                                              =                        "multi-target"                                            >                                                                                      </div                      >

                                      div                    {                    width                    :                    250px;                    tiptop                    :                    150px;                    }

                                      .multi-target                    {                    groundwork                    :                    repeating-radial-gradient                    (ellipse at 80% 50%,                    rgba                    (0,0,0,0.5)                    ,                    rgba                    (0,0,0,0.v)                    15px,                    rgba                    (255,255,255,0.5)                    15px,                    rgba                    (255,255,255,0.5)                    30px)                    top left no-repeat,                    repeating-radial-gradient                    (ellipse at 20% 50%,                    rgba                    (0,0,0,0.5)                    ,                    rgba                    (0,0,0,0.v)                    10px,                    rgba                    (255,255,255,0.5)                    10px,                    rgba                    (255,255,255,0.5)                    20px)                    top left no-repeat yellow;                    background-size                    :                    200px 200px,                    150px 150px;                    }

Run across also

Gradient functions: linear-gradient(), radial-slope(), conic-gradient(), repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-slope()
Slope-related CSS data types: <slope>, <prototype>
Gradient-related CSS properties: background, groundwork-prototype
CSS Gradients Patterns Gallery, by Lea Verou
CSS3 Gradients Library, by Estelle Weyl
Slope CSS Generator