Phase2Results.php" ); ?> Gradient Fill - RuntimeWiki

Gradient Fill

From RuntimeWiki

Jump to: navigation, search



Gradient Fill

Detailed write-up


Add gradients to CSS like what exists in Flash or WPF.

Why Is This Important?

Sam Lie of Prototype.js says: "Alot of the great visual effects of Flash and Silverlight comes from simple implementation of these APIs. If only CSS had these, we won't need to be relying on hacks of background images and the look and feel of Ajax applications will be on par with Flash/Silverlight."

What exists today?

  • Flash has done radial gradients since the beginning.
  • All versions of SVG supports both linear and radial gradients, along with the ability to animate the gradients.
  • Same thing with XAML, WPF, and Silverlight (whose gradient features look remarkably similar to SVG's).
  • The Canvas object in HTML5 supports both linear and radial gradients, but there is no animation support.
  • WebKit supports the -webkit-gradient extension. ( WebKit also supports CSS animation ( (Does anyone know if WebKit can animate its CSS gradients? It looks like it can.)

Regarding HTML and CSS animation:

  • IE5.5 added SMIL support within HTML (XHTML+SMIL), which allows animation of most HTML attributes and CSS properties, all of which is very cool, but most likely this is not under active development by Microsoft and doesn't seem to have lit any fires within the Web community
  • Recent builds of WebKit support CSS animations (


In this section, the contributors should express their opinions about this feature request, such as providing particular technical analysis or describing in prose why this feature is important (or not). It is recommended that each contributor create his own level-3 sub-section.

It is OK for others to insert comments within other people's sections, but as a courtesy please make sure that it is clear which part of the section is original and which section are annotative comments. For example, perhaps annotative comments would be colorized (e.g., enclosed by <span style="color:red">JON: Here is what I think about what you are saying.</span>).

Jon Ferraiolo Comments

One approach to keep in mind is to generalize SVG's gradients and animation features to work with HTML content, also. Probably the best strategy would be to make SVG's 'fill' property(ies) apply to anything that currently supports the <color> values, such as the 'color' property. For extra credit, also figure out a way to support SVG's 'stroke' property (and its companions such as 'stroke-width') wherever fill is supported.

Coach Wei's comments

Great addition indeed. If Gradient Fill and Blur effect are available, the web will be sexy again.

Phase I Voting - Vote for Your Top 5 Features

NOTE: PHASE I VOTING IS NOW OPEN. (2008-04-01) We have now changed the voting procedure. Instead of putting votes on each separate wiki page, we are asking people to cast their Phase I Votes on the following wiki page:

Phase II Voting

More about this later.

Personal tools