This website is mostly about a CSS3 Gradient Generator and a few other diversion projects which were interesting enough to be delved into.
Before moving any further let’s first understand < gradient >. Going by how it is summarized by the experts, the < gradient > is a CSS data type which denotes a CSS < image >. This image is made up of a progressive transition between colors (two or more). Please note that when we say a CSS gradient, we’re not referring to a CSS < color >. Instead, we are referring to an image that has no intrinsic dimensions, implying that there is no preferred or natural size, nor there is any preferred ratio. The concrete size of this image is meant to match that of the element that it is applied to.
CSS3 gradients allow for smooth transitions between different colors (two or more). As also mentioned above, one had to make use of images (in case of CSS) for achieving these effects. However, by making use of CSS3 gradients one can now significantly reduce the bandwidth usage and the download times. To add to that, the elements created with gradients have a far better appearance, even when you zoom into them, as the gradient gets generated by the browser.
When we talk about CSS3 gradients, we are referring to two different kinds as follows:
Radial gradients – These gradients are defined by their center.
Linear gradients – These gradients go left / right / down / up / diagonally
Apart from these two, there more kinds which are actually their derivatives, namely: repeating–linear–gradient, repeating – radial–gradient and more. All these gradients are well supported by all major web browsers like Google, Opera, Mozilla Firefox, Internet Explorer and more, including all their important versions.
Let’s talk a little more about the linear and radial gradients.
CSS3 Linear Gradients
For creation of a linear gradient, it is important to define at least two different color stops. These color stops are nothing but the colors that you need for rendering of smooth transitions among colors. It’s also possible to set a starting point as well as a direction (or an angle) apart from the gradient effect you need.
The syntax to be used is as follows:
background: linear-gradient (direction, color-stop1, color-stop2, ...);
Top to bottom linear gradient (this one is the default) - This type of linear gradient starts at the top. It starts with one particular color and slowly transitions into another one as it moves downwards.
Left to right linear gradient – This type of linear gradient starts from the left. It starts with one particular color and slowly transitions into another one as it moves right.
Diagonal linear gradient – You can also get a nice diagonal effect on a gradient by specifying both the vertical as well as horizontal starting positions. So, in this case you’ll get a linear gradient which starts from one diagonal end, let’s say top left. It starts with a particular color and slowly transitions into another one as it moves to the opposite diagonal and, which is bottom right in this case.
You can also bring about some other important effects as that of angles, transparency, multiple color stops and a repeating effect in linear gradients. Let’s go over each one of them briefly as follows:
Angles – You can gain more control over the gradient’s direction by defining an angle, instead of using predefined directions like: to bottom right, to bottom left, to bottom, to write, to top, to left etc. The specification of angle is done in the form of an angle between the gradient line and a horizontal line.
Multiple color stops – You can also achieve a linear gradient, let’s say from top to bottom or left to right, having multiple color stops in between. Then, there’s an option to even have some text on top of it.
Transparency – Another great feature of CSS3 gradients is that they support transparency, which if used effectively can deliver amazing fading effects. To achieve transparency effect, you need to make use of the rgba () function for the definition of color stops. It’s the last parameter of this function which defines the color transparency. Its value can vary from 0 to 1. While 0 delivers complete transparency, 1 provides full color, or in other words, 0 transparency.
Repeating linear gradient – A repeating effect can be achieved in linear gradients by making use of the repeating-linear-gradient () function.
CSS3 radial gradients
As mentioned earlier, the CSS3 radial gradients are defined by their center. You must also define at least two color stops while creating a radial gradient.
The syntax to be used is as follows:
background: radial-gradient(shape size at position, start-color, ..., last-color);
The default shape of radial gradients is ellipse. The default position is center and the default size is farthest-corner. Hence, the default radial gradient is evenly spaced color stops. Apart from that you can also create a radial gradient with differently spaced color stops.
Shape parameter - The shape parameter of the radial gradient’s syntax is responsible for defining its shape. Its value can be ellipse or circle, and the default value is ellipse.
Size parameter - The size parameter of the radial gradient’s syntax is responsible for defining the gradient’s size. You can have either of the following four values as this parameter: farthest-corner, farthest-side, closest-corner, closest-side.
Repeating radial gradient
Just like you have a repeating linear gradient, you can have a repeating a radial gradient as well. This can be achieved by making use of the repeating-radial-gradient () function.
CSS3 Gradient Generator
Please note that we haven’t provided the actual codes of the examples shared above. Creation of CSS3 gradients by hand can be a very difficult affair. This is where a CSS3 gradient generator comes into the picture. It can help you in the form of a skillful tool that can create some stunning interfaces for you, using gradients and without the need of any images. It means that your webpages will turn out to be much lighter and will load fairly quickly. This can be very helpful from the search engine optimization aspect as well.
The CSS3 Gradient Generator provides the following:
- It provides for color format. You can choose how you’d like your colors to be formatted. They can be either in HEX or RGB format.
- You can select the gradient direction: X – Start (Left or Right), Y – Start (Top or Bottom), X – End (Left or Right) and Y – End (Top or Bottom).
- You can also pick up from the different color swatches in RGB and set different parameters for hue, saturation and brightness.
- The gradient generator make sure that your preferences are properly stored until you visit it next time!
Once it has generated the output code for you, you can easily copy it to your clipboard and use it wherever needed.