CSS Gradient Generator - Make and generate beautiful gradients

Time 2022-07-28 07:17:07

Web Name: CSS Gradient Generator - Make and generate beautiful gradients

WebSite: http://www.css-gradient.com

ID:262533

Keywords:

Generator,Make,CSS,Gradient

Description:

CSS Gradient Generator

Style LinearRadial Direction Colors Random Output format HexRgba Get CSS Get Share Link

Made with ❤ by Stefano Merlo
© 2016-2022 • Terms & Privacy

⇣ Scroll for more ⇣

About CSS Gradients

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.

Keep reading below to learn more about Linear Gradients, Radial Gradients, Repeating Gradients, Conic Gradients or Text Gradients.

Or, get inspired and discover more gradient backgrounds by color: Red gradient backgrounds, Orange gradient backgrounds, Yellow gradient backgrounds, Green gradient backgrounds, Azure gradient backgrounds, Blue gradient backgrounds, Purple gradient backgrounds, Pink gradient backgrounds or Monochrome gradient backgrounds.

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)

Definition from W3Schools

The <gradient> CSS data type denotes a CSS <image> made of a progressive transition between two or more colors. A CSS gradient is not a CSS <color> 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.

Definition from MDN - Mozilla Developer Network

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.

Definition from W3C

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.

Definition from W3C

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.

Definition from W3C

Read more about how radial 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 <length>, the color-stops of a conic gradient are specified with an <angle>. 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.

Definition from W3C

Read more about how radial 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 linear 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.

TAGS:Generator Make CSS Gradient

<<< Thank you for your visit >>>

Hot Websites