About the Gradient Editor
This online gradient tool lets you create, edit and preview gradients in your browser.
You can create CSS background gradients or image gradients.
The interface in this editor is meant to be similar to standard gradient editor dialogs
you would find in Photoshop, GIMP or any other standard image editor.
What is a Gradient
A gradient is a gradual transition of color from one color point to another.
The points in a gradient are generally called stops so from here on we will use color stops
instead of points.
The simplest gradient has two color stops but a gradient can have multiple color stops.
The stops in a gradient are graduated on a scale of 0 to 1 or a scale of 0% to 100%.
The gradient starts rendering colors at 0 or 0% and ends at 1 or 100% depending on the scale used.
The stops do not represent
actual distances but represents the fractional or percentage distance the stop color will occupy when the gradient is
drawn between two coordinate points.
Along with color stops a gradient can have opacity stops
. Like their color stop counterpart, opacity stops are used to define points of
transitions but they represent transitions in opacity instead of color. By using opacity stops you can make a gradient gradually transition from visible
on one end to invisible on the other.
Gradients can be linear or radial. The most commonly used gradient is the linear gradient
More likely than not, the gradients you see in buttons and backgrounds on the web are linear gradients.
They are formed by transitions of color along a straight line. Radial gradients
on the other hand
are created by circular transitions of color from a central point radiating outward.
When you open this page the gradient editor is loaded with a default gradient.
You edit the gradient by moving, adding or deleting the color or opacity stops and by changing
the color and opacity values in them respectively. The gradient editor has several panels to accomplish these tasks.
Gradient Profile Panel
The gradient profile panel contains an image of the gradient profile. Above the gradient profile is a horizontal bar of draggable
opacity stop markers. The bar below the gradient profile contains the color stop markers. By moving and clicking the stop markers you can alter the gradient.
Color Stop Markers
Color stop markers indicate the position and color of a color stop in the gradient.
Clicking a color stop makes it activate in the editor and selects it
in the color stop editor panel
. Dragging the color stop marker horizontally
will position the color stop at a value from 0 to 100 depending on where you release it.
Moving a marker to the begin of the gradient profile means the color stop is set to position zero and the color in the marker will start the gradient.
Moving it to the end means the color stop is at 100 and the color in the marker will end the gradient.
Dragging the color stop marker vertically off the bar will delete
the stop. To add
a color stop
click anywhere in the bar beside the other markers. The new color stop will get the color of the click position
in the gradient profile image.
Opacity Stop Markers
Opacity stop markers show the position of an opacity stop in the gradient profile. Clicking an opacity stop
will make it active in the editor and will select it in the opacity stop editor panel
The opacity of the stop can be changed by using the slider in the opacity stop editor panel.
You can drag the opacity markers horizontally to position the associated opacity stop.
Dragging vertically will delete the opacity stop.
Color Picker Panel
The color picker is used to select the color of the active color stop.
You make a color stop active by clicking its marker in the gradient profile or its associated
color swatch in the color stop editor panel.
The color picker contains three color selecting controls.
The hue slider
on the right can be dragged or clicked to change the hue of the gradient color stop. The box on the left
sets the saturation or value. In the third control you can enter text color values using one of the string formats below:
rgb(255, 0, 0)
rgb 255 0 0
hsl(0, 100, 50)
hsl(0, 100%, 50%)
hsl 0 100 50
hsl 0 100% 50%
hsv(0, 100%, 100%)
hsv(0, 100, 100)
hsv 0 100% 100%
hsv 0 100 100
Color Stop Editor Panel
The color stop editor panel contains a list of all the color stops in the gradient.
Each row in the list has three controls to manipulate the corresponding color stop.
The color swatch shows the color of a stop in the gradient. If a marker is clicked in the gradient profile color stop bar
the corresponding swatch for that marker is selected and highlighted in the color stop editor list. On the other hand, you can also
click on the color swatch to selected a stop marker. The color picker automatically changes to the color of the selected
swatch. Changing the color in the color picker changes the color of the selected swatch.
While you can drag the color stop marker to set the position of a stop,
you can also use the position entry field in the color stop editor panel.
If you enter a value in the position field the marker will jump to that position in the gradient profile panel.
If you drag a marker you will see the corresponding position entry field for that marker changing values in
the color stop editor panel list.
Previously we mentioned that you can drag a color stop marker vertically to delete a stop.
The delete button in the color stop editor list can also be used to remove markers and delete associated stops.