Градиент кнопки 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.

Источник

Gradient Buttons Generator

Generate gradient buttons instantly with this tool, click on a gradient to export its CSS/HTML!

. want more tools like this? Join the waitlist to be notified of when we launch more tools.

Copy gradient

Copy the CSS below plus the HTML for your button.

CSS

HTML

Other Tools

SVG Wave Background

Waves on a background of your choice, great for landings!

Triangle Background

A popular option, consisting of a triangle background, displayed as an SVG graphic.

Animated Particles

Animated particles on gradient backgrounds, with over 50 templates and counting!

Create Gradient Buttons With This Tool

This tool allows you to create gradient buttons quickly and easily. With gradient buttons becoming a rising trend in the world of web design and product design, get yourself some cool gradient buttons to experiment with in your designs!

You can also add glow effects to your buttons, as well as other neon effects too, we might develop another tool which will help you to do this in the future.

After you’ve found a gradient button that you like, simply click on it and you’ll find its exported HTML and CSS.

Get Premium Backgrounds

Gain access to over 100 premium backgrounds for your commercial & personal sites, plus get a 20% off discount with coupon code ORDER20.

Источник

CSS Генератор кнопки

используются, когда необходимо определить стиль для отдельного элемента веб-страницы.

Имена классов должны начинаться с латинского символа и могут содержать символ дефиса (-) и подчеркивания (_).

Чтобы указать в HTML-коде, что тег используется с определенным классом, в тег добавляется атрибут .

Стиль шрифта

Насыщенность

Шрифт

Насыщенность — font-weight CSS

Устанавливает насыщенность(жирность) шрифта. Стандартная жирность шрифта равна 400.

Курсив — font-style CSS

Подчеркивание — text-decoration CSS

Добавляет оформление текста в виде его подчеркивания(underline), перечеркивания(line-through) и линии над текстом(overline).

Размер, цвет и градиент шрифта

Размер, цвет и градиент шрифта

Размер шрифта

Угол

Процент цвета

Процент цвета

Размер шрифта — font-size CSS

Цвет текста — color CSS

Градиент текста — CSS background: linear-gradient

background: linear-gradient (угол градиента(deg),
первый цвет градиента(rgb) процент первого цвета(%), второй цвет градиента(rgb) процент второго цвета(%));
Свойство -webkit-background-clip: text; обрезает любой
фон(в том числе градиентный) по границе текста.
Используется в сочетании с css-свойством
-webkit-text-fill-color: transparent; которое обеспечивает прозрачность букв текста, за счет чего фон проглядывает через него.

Тень текста

Сдвиг по X

Сдвиг по Y

Размытие

Цвет тени

Сдвиг по X

Сдвиг по Y

Размытие

Цвет тени

Сдвиг по X

Сдвиг по Y

Размытие

Цвет тени

Тень текста — text-shadow CSS

Параметры: цвет тени(rgb), смещение по горизонтали
(сдвиг по X), смещение по вертикали(сдвиг по Y) и радиус размытия. Чем больше радиус размытия, тем сильнее тень сглаживается, становится шире и светлее.

Размер и цвет заднего фона

Размер и цвет заднего фона

Ширина

Высота

Непрозрачность

Угол

Процент цвета

Процент цвета

URL изображения:

Расположение изображения

По горизонтали

По вертикали

Размер изображения

Ширина

Высота

Ширина — width CSS.

Высота — height CSS.

Непрозрачность — opacity CSS

Значение 0 соответствует прозрачности элемента, значение 1 — непрозрачности элемента.

Задний фон — background CSS

Устанавливает цвет заднего фона:
1) сплошной цвет(rgb);
2) градиент — linear-gradient(угол(deg), цвет(rgb) процент цвета(%), цвет(rgb) процент цвета(%));
3) Изображение для заднего фона может устанавливаться как в свойстве background-image, так и в свойстве background.

background-position CSS определяет расположение изображения внутри элемента по горизонтали и по вертикали.
background-size CSS задает ширину и высоту изображения внутри элемента.
background-repeat CSS указывает будет ли повторяться изображение.

Источник

Ultimate CSS Gradient Generator

The Ultimate CSS Gradient Editor was created by Alex Sirota (iosart). If you like this tool, check out ColorZilla for more advanced tools such as eyedroppers, color pickers, palette editors and website analyzers.

As you might know, HTML5 introduced many exciting features for Web developers. One of the features is the ability to specify gradients using pure CSS3, without having to create any images and use them as repeating backgrounds for gradient effects.

Important: You’ll need a recent version of Firefox, Chrome, Safari, Opera or IE to use this Gradient Generator. The resulting CSS gradients are cross-browser — they will work in these browsers and will also fall back to a simpler gradient in older versions of Internet Explorer.

Features

• Powerful Photoshop-like interface
• Cross browser CSS output
• Horizontal, vertical, diagonal and radial gradients
• Complex multi-stop gradients
• Opacity support with multiple opacity stops
• Hex, rgb, rgba, hsl, hsla color formats
• Support for full multi-stop gradients with IE9
• Import from image (convert image gradient to CSS)
• Import from existing CSS
• Adjust gradient by hue, saturation, lightness
• More than 135 gradient presets
• Saving custom gradient presets
• Sass output
• Flexible preview panel
• Gradient permalinks for sending and sharing
• More soon!

Help

• » Adjust the gradient stop position by dragging the stop marker
• » Adjust the stop color by double clicking on the stop marker
• » Delete a stop by draggin the stop marker up or down
• » Add a new stop by clicking anywhere in between the existing stop markers

The ‘Preview’ panel allows previewing the current gradient as a vertical or horizontal one, and also allows quickly previewing how the Internet Explorer fallback gradient will look in IE.

Finally, the ‘CSS’ panel always has the CSS for the current gradient for easy copying and pasting into your stylesheet. You can also use this panel to import an existing gradient CSS into the tool.

Credits

The ‘Ultimate Web 2.0 Gradients’ preset gradients were derived from work by deziner folio and SGlider12.

The Color Picker is a minor adaptation of John Dyer’s Color Picker.

The Base-64 encoder function is from webtoolkit.

Tags: CSS Gradient Editor, CSS Gradient Generator, HTML5 Gradient Generator, CSS3 Gradient Generator, CSS Gradient Maker, CSS Gradient Creator, Linear Gradients, Radial Gradients, IE6, IE7, IE8, IE9, IE10, SVG Gradients, ColorZilla

Источник