Color Picker
Color Stops
Opacity Stops
°
CSS
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.
Editing Gradients
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:
| format | string |
|---|---|
| name | red |
| rgb |
rgb(255, 0, 0)
rgb 255 0 0 |
| hex |
#ff0000
ff0000 #fff fff |
| hsl |
hsl(0, 100, 50)
hsl(0, 100%, 50%) hsl 0 100 50 hsl 0 100% 50% |
| hsv |
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.Color Swatch
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.Position Field
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.Delete Button
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.Click here for a complete list of available gradients.