Strict (2048): Declaration of AjaxHelper::afterRender() should be compatible with Helper::afterRender($viewFile) [APP/View/Helper/AjaxHelper.php, line 24]
GradientR - Web20
  • Generator
  • About GradientR
  • How to add gradients to your layout

Created by Lasar Liepins,

GradientR builds on the shoulders of giants:

Here are a few examples for using your gradients with CSS. Basic CSS knowledge (where to put your CSS definitions) is expected. If you don't know CSS yet, start here.

This is the most basic definition that will get you going. It defines a background color, the URL to the gradient image and tells the browser how to repeat the image:

#myElement {
	background: #000 url(/img/form_bg.png) repeat-x;

Since no positioning info was given, the background image will be put in the upper left corner. repeat-x tells the browser to only repeat it horizontally, i.e. to the right. When the element you are defining this for is higher than the gradient, the background color kicks in. So in this case the background color should match the color the gradient ends in.

If your gradient goes from the left to the right, the code is much the same:

#myElement {
	background: #000 url(/img/form_bg.png) repeat-y;

Note that it now says repeat-y, which will repeat your gradient from top to bottom.

Positioning your gradient at the bottom of the element is easy as well:

#myElement {
	background: #EEE url(/img/form_bg.png) repeat-x 0 bottom;

The newly added 0 bottom tells the browser to put it on the left side (just like it will by default, but when we add a vertical position, both horizontal and vertical positions must be given). And bottom tells it to start at the end, so to say.

In this case the background color should match the topmost color of your gradient, since that's where it will be shown if your element is higher than the gradient.

And to make things complete, here's how to put your gradient on the right side of an element:

#myElement {
	background: #EEE url(/img/form_bg.png) repeat-x right;

And that's it.

General settings:


Output format: PNG

Add gradient

Add solid area

Gradient remove


Flip colors

Solid remove