Синие градиенты для css

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.

Источник

Синие градиенты для css

ВСЕ О ТОМ, КАК
СДЕЛАТЬ САЙТ
САМОМУ

Прекрасные градиенты на CSS3

Дата публикации:2014-05-19

Если раньше для создания градиентов на сайте, приходилось использовать отдельные изображения, которые заранее делались в каком-либо, графическом редакторе, или же задавались как повторяющийся фон, то сейчас это вовсе не нужно. Благодаря CSS3 теперь градиенты можно делать с помощью кода, и получать прекрасный эффект, ни каких лишних изображений. Ниже вы увидите градиенты которые можно сделать, а под ними css код для их реализации:

background: -webkit-linear-gradient(#e74c3c, #f1c40f);
background: -o-linear-gradient(#e74c3c, #f1c40f);
background: -moz-linear-gradient(#e74c3c, #f1c40f);
background: linear-gradient(#e74c3c, #f1c40f);

background: -webkit-linear-gradient(#01d9fe, #1558f3);
background: -o-linear-gradient(#01d9fe, #1558f3);
background: -moz-linear-gradient(#01d9fe, #1558f3);
background: linear-gradient(#01d9fe, #1558f3);

background: -webkit-linear-gradient(#a4e786, #5ad427);
background: -o-linear-gradient(#a4e786, #5ad427);
background: -moz-linear-gradient(#a4e786, #5ad427);
background: linear-gradient(#a4e786, #5ad427);

background: -webkit-linear-gradient(#3d68bf, #0d1423);
background: -o-linear-gradient(#3d68bf, #0d1423);
background: -moz-linear-gradient(#3d68bf, #0d1423);
background: linear-gradient(#3d68bf, #0d1423);

background: -webkit-linear-gradient(#dadaef, #8e9198);
background: -o-linear-gradient(#dadaef, #8e9198);
background: -moz-linear-gradient(#dadaef, #8e9198);
background: linear-gradient(#dadaef, #8e9198);

background: -webkit-linear-gradient(#fedd45, #eebb0a);
background: -o-linear-gradient(#fedd45, #eebb0a);
background: -moz-linear-gradient(#fedd45, #eebb0a);
background: linear-gradient(#fedd45, #eebb0a);

background: -webkit-linear-gradient(#d8c786, #75662a);
background: -o-linear-gradient(#d8c786, #75662a);
background: -moz-linear-gradient(#d8c786, #75662a);
background: linear-gradient(#d8c786, #75662a);

background: -webkit-linear-gradient(#c65e57, #873630);
background: -o-linear-gradient(#c65e57, #873630);
background: -moz-linear-gradient(#c65e57, #873630);
background: linear-gradient(#c65e57, #873630);

Нашли ошибку в тексте.
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

Источник

CSS Gradients

CSS gradients let you display smooth transitions between two or more specified colors.

CSS defines three types of gradients:

• Linear Gradients (goes down/up/left/right/diagonally)
• Radial Gradients (defined by their center)
• Conic Gradients (rotated around a center point)

CSS Linear Gradients

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

Syntax

Direction — Top to Bottom (this is default)

The following example shows a linear gradient that starts at the top. It starts red, transitioning to yellow:

Example

Direction — Left to Right

The following example shows a linear gradient that starts from the left. It starts red, transitioning to yellow:

Example

Direction — Diagonal

You can make a gradient diagonally by specifying both the horizontal and vertical starting positions.

The following example shows a linear gradient that starts at top left (and goes to bottom right). It starts red, transitioning to yellow:

Example

Using Angles

If you want more control over the direction of the gradient, you can define an angle, instead of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc.). A value of 0deg is equivalent to «to top». A value of 90deg is equivalent to «to right». A value of 180deg is equivalent to «to bottom».

Syntax

The following example shows how to use angles on linear gradients:

Example

Using Multiple Color Stops

The following example shows a linear gradient (from top to bottom) with multiple color stops:

Example

The following example shows how to create a linear gradient (from left to right) with the color of the rainbow and some text:

Example

Using Transparency

CSS gradients also support transparency, which can be used to create fading effects.

To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).

The following example shows a linear gradient that starts from the left. It starts fully transparent, transitioning to full color red:

Example

Repeating a linear-gradient

The repeating-linear-gradient() function is used to repeat linear gradients:

Example

A repeating linear gradient:

Источник