Repeating linear gradient css generator

CSS Gradient Generator

The repeating-linear-gradient() and the repeating-radial-gradient() create gradients consisting of repeating linear or radial gradients.
They are similar to the linear-gradient() and radial-gradient() and they take the same arguments, but instead of producing only a single gradient, they repeat the color stops in all directions so as to cover the entire container to which they are applied.

background: repeating-linear-gradient(direction, color-stop1, color-stop2, . );

background: repeating-linear-gradient(#7A7FBA, #11C37C 25%);

background: repeating-radial-gradient(shape-position, start-color, . end-color);

background: repeating-linear-gradient(#7A7FBA, #11C37C 50%);

Browser compatibility

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Opera Mini	Android Browser	Chrome Android
10+	12+	3.6+	10+	5.1+	11.5+	5+	x	4+	98+

You can read more information about browser compatibility here. For maximum cross-browser compatibility and coverage, it’s important that you use CSS prefixes. You can use this tool to append CSS prefixes to your CSS code.

CSS Gradients Generator

You can easily generate your own gradients with the online css gradient generator.

Источник

Linear Gradient

A linear gradient follows a straight line, with several color placed along that line. The space between these colors will gradually blend from one color to another. When writing the gradient in CSS (Cascading Style Sheet) it uses the background image property as a way to make the gradient go from one color to another.

CSS Gradient

Color gradient is a free tool for creating css gradients. This tool supports the full css background specification. With color gradient you can easily create simple gradients, as well as far more complex gradient types like patterns and radial gradients. This website also contains some interesting articles about css tricks (involving gradients) you might not yet know about.

CSS specification

The CSS spec defines the linear-gradient as follows: background-image: linear-gradient([ | ]?, ) The linear-gradient determines the type of gradient. This can also be a radial-gradient of a conic-gradient. You can optionally specify the line the gradient must follow by setting an angle or the side-or-corner argument.

Simplest form

The simplest scenario will create a gradient of one point to another, the gradient line will go from top to bottom with the colors starting on both ends. background-image: linear-gradient(#A100FFFF, #119CFDFF)

Angle or direction

By setting the angle as the first argument, you can specify the direction the gradient line follows. This argument is set in degrees with a range from 0deg to 360deg. background-image: linear-gradient(36deg, #A100FFFF, #119CFDFF)

Keywords

If the argument is specified as ‘to top’ ‘to right’ ‘to bottom’ or ‘to left’, the angle is ‘0deg’ ‘90deg’ ‘180deg’ or ‘270deg’ respectively. Other values that are possible are: ‘to top left’, ‘to top right’, ‘to bottom left and ‘to bottom right. This will result in the gradient line being set to the corners of the box in which the gradient is displayed. background-image: linear-gradient(to top left, #A100FFFF, #119CFDFF)

Color stops

From here on it’s easy to add more stops to the gradient. Just insert another color code and position to the list of colors. The color code can be hex, rgb(a) or any of the other CSS color codes. The position is expressed in relative %, px value or any of the other CSS unit values. You can add as many stops as you like, at every position you like.

One caveat: The color stops must be defined in ascending order of the position. background-image: linear-gradient(#A100FFFF, #000000 10%, #FFFFFF 15%, #119CFDFF)

Repeating linear gradient

The repeating-linear-gradient function accepts exactly the same arguments as linear-gradient. The main difference is that the gradient will repeat it self after the last the color stop. This effect is most noticeable when the color stop ends within the gradient box, for example at 60%: background-image: repeating-linear-gradient(90deg, #A100FFFF 0%, #71C4FFFF 60%);

Gradient generator

Checkout our awesome gradient generator. It’s easy and to use and has many complex css gradient features.

Источник

CSS Gradient Generator

This generator will produce CSS Gradient code using a simple graphical user interface. The CSS code that is generated will work in all browsers that support CSS3. The generator will produce code for linear gradients and also radial gradients, plus has the ability to import existing CSS gradient code to edit.
If you’re finding it hard to know where to start, then just select one of our preset colors to see the resulting gradient.

Don’t forget to check out our CSS Text Gradient Generator.

Gradient Examples (click to experiment with)

About CSS Gradients

The days when it was possible to make a gradient on a website only using pictures are long gone. It is now easy enough to create gradients inside CSS styles.

To set the gradient, we use the CSS property background-image or an abbreviated version of background-image . We can create both linear and radial gradients by using either linear-gradient or radial-gradient functions and specifying the start and end colors. Here’s an example syntax:

background: linear-gradient(#23EC05, #D712C5);

It is also possible to change the direction by specifying it first, before the first color. Options are: to top left , to top , to top right , to right , to bottom right , to bottom , to bottom left and to left .

background: linear-gradient(to right, #0cbaba, #380036);

If you replace this parameter with to top right you will get a diagonal gradient. The same effect can be created by specifying a parameter in degrees, for example, 45deg .

You can also use more than 2 colors, colors values can be specified in HEX, RGB, RGBA, HSL, HSLA and color name.

background: linear-gradient(to right, #0cbaba, #380036, darksalmon);

Each of the colors specified will take up an equal amount of available space, giving us a smooth and balanced gradient.

If we want one color to take up more space than another, we can add a percentage value immediately after the color. Practice with the css gradient generator above to see how this alters the gradients.

background: linear-gradient(to right, #0cbaba 50%, #380036, darksalmon);

Radial Gradients

Let’s use everything we’ve learned so far to create a radial gradient. In fact, it is quite simple, it is enough to specify the value at the beginning radial-gradient .

background: radial-gradient(#23EC05, #D712C5);

This radial gradient takes the shape of the parent block, so instead of a circle, we get an ellipse. For the gradient to be in the shape of a circle, regardless of the proportions of the parent, the keyword circle must be specified.

background: radial-gradient(circle, #23EC05, #D712C5);

In addition, we can specify where the center of the radial gradient will be. Let’s make it in . the upper left corner:

background: radial-gradient(circle at top left, #23EC05, #D712C5);

Источник

CSS Gradient Generator

The CSS Gradient online generator tool is a nice and simple to use utility to quickly generate linear and radial color gradients. You can create the gradients and export the CSS code with colors in HEX or RGB format.

CSS Gradients Browser compatibility

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Opera Mini	Android Browser	Chrome Android
10+	12+	16+	26+	6.1+	12	7.1+	x	4.4+	46+

What is a CSS Gradient?

CSS3 gradients let you display smooth transitions between two or more specified colors.
Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser.

CSS defines three types of gradients:
— Linear Gradients (direction down/up/left/right/diagonally)
— Radial Gradients (defined by their center)
— Conic Gradients (rotated around a center point)

The CSS data type denotes a CSS made of a progressive transition between two or more colors. A CSS gradient is not a CSS but an image with no intrinsic dimensions; that is, it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the one of the element it applies to.

There are four kinds of color gradients:
— linear gradients, generated by the linear-gradient() function, where the color smoothly fades along an imaginary line.
— radial gradients, generated by the radial-gradient() function. The more away from an origin a point is, the more far from the original color it is.
— repeating gradients, generated with the repeating-linear-gradient() and repeating-radial-gradient() functions, and which are fixed sized linear or radial gradients repeated as much as needed to fill the entire box.
— conic gradients, generated with the conic-gradient() function, and which transition colors progressively around a circle.

CSS Linear Gradients

What is a CSS Linear Gradient?

A linear gradient is created by specifying a straight gradient line, and then several colors placed along that line. The image is constructed by creating an infinite canvas and painting it with lines perpendicular to the gradient line, with the color of the painted line being the color of the gradient line where the two intersect. This produces a smooth fade from each color to the next, progressing in the specified direction.

Read more about how linear gradients works and how to generate them here.

CSS Radial Gradients

What is a CSS Radial Gradient?

In a radial gradient, rather than colors smoothly fading from one side of the gradient box to the other as with linear gradients, they instead emerge from a single point and smoothly spread outward in a circular or elliptical shape.
A radial gradient is specified by indicating the center of the gradient (where the 0% ellipse will be) and the size and shape of the ending shape (the 100% ellipse). Color stops are given as a list, just as for linear-gradient(). Starting from the gradient center and progressing towards (and potentially beyond) the ending shape uniformly-scaled concentric ellipses are drawn and colored according to the specified color stops.

Read more about how radial gradients works and how to generate them here.

CSS Repeating Gradients

What is a CSS Repeating Gradient?

In addition to linear-gradient() and radial-gradient(), this specification defines repeating-linear-gradient() and repeating-radial-gradient() values. These notations take the same values and are interpreted the same as their respective non-repeating siblings defined previously.
When rendered, however, the color-stops are repeated infinitely in both directions, with their positions shifted by multiples of the difference between the last specified color-stop’s position and the first specified color-stop’s position.

Read more about how repeating gradients works and how to generate them here.

CSS Conic Gradients

What is a CSS Conic Gradient?

A conic gradient starts by specifying the center of a circle, similar to radial gradients, except that conic gradient color-stops are placed around the circumference of the circle, rather than on a line emerging from the center, causing the color to smoothly transition as you spin around the center, rather than as you progress outward from the center.
A conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops. Unlike linear and radial gradients, whose color-stops are placed by specifying a , the color-stops of a conic gradient are specified with an . Rays are then drawn emerging from the center and pointing in all directions, with the color of each ray equal to the color of the gradient-line where they intersect it.

Read more about how conic gradients works and how to generate them here.

CSS Text Gradients

What is a CSS Text Gradient?

Using gradient on a text works the same way as the linear gradient, only that in this case you apply the gradient to a text instead of filling a background.
You’ll love it. Just try to hover over the website logo on the left and you’ll see for yourself.

Read more about how text gradients works and how to generate them here.

Where can I find more information about CSS gradients?

You can find more informaiton about CSS gradient at W3Schools, Mozilla Developer Network, W3C, QuirksMode. Compatibility Data from Can I Use. More information about compatibility on Desktop and Network.

Источник