Home News CSS3 Gradients
0

CSS3 Gradients

CSS3 Gradients



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. Just as you can declare the background of an element to be a solid color in CSS, you can also declare that background to be a gradient. Using gradients declared in CSS, rather using an actual image file, is better for control and performance. Gradients are typically one color that fades into another, but in CSS you can control every aspect of how that happens, from the direction to the colors (as many as you want) to where those color changes happen. Let’s go through it all.

CSS3 Gradients is a free online service providing 1,100 ready made gradients for you to use in your projects and designs. 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. Over the past several months, the CSS Working Group has had extended discussions about making the gradient syntax easier to use, and recently Tab Atkins included a proposal in the latest draft of the Image Values and Replaced Content module. WebKit and Mozilla have now implemented this proposal so that web authors can experiment with it, and provide feedback to the Working Group. Note that the proposal is still an editor’s draft, which means that it’s still possible, and even likely to change due to user feedback. The main goal of the new syntax is simplicity; it’s now really easy to code up common gradients, as you’ll see in the examples below. A secondary goal was to specify something where implementations were compatible across browsers.

CSS3 Gradients Generator
CSS3 Gradients Generator

CSS3 Gradients Generator

Gradient is a great color feature addition in CSS3. Rather than only add a single color, we can now add multiple color combinations in one declaration block without relying on images, which could decrease the HTTP request in our website allowing the website load faster. The second value of the function will tell the first color information and its stop position which is stated in percentage. The stop position actually is optional; the browser is clever enough to determine the proper position, so when we don’t specify the first color’s stop the browser will take 0% as the default. And, the next value is the second color combination. It works like the previous value, only that if it is the last color applied, and we do not specified the stop position, a value of 100% will be taken as the default. Now, let’s look at the example below:

Css3 gradients examples

CSS3 gradients are available to use in Webkit (Safari, Chrome) and Mozilla (Firefox) browsers. They’re not exactly new but I only recently started using them consistently myself so I’ve put together this quick article. The word gradient has many different meanings, but in CSS, a gradient is strictly defined as a gradual transition between a range of (at least two) colours. CSS gradients are a fairly recent development but have already been through a number of changes. They were originally proposed by the WebKit team in April 2008, modified from the syntax proposed for the canvas element in HTML 5.

div {
  background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
}

LEAVE YOUR COMMENTS!

Your email address will not be published. Required fields are marked *