Creating linear gradients
Using only flat colors on objects doesn't allow us much freedom in our artistic expressions; most often we want to use smooth blends of different colors, also known as gradients. Gradients have more uses than we can count, but are most often applied to make objects stand out in some way, by creating a realistic or appealing look. They can be applied to fills and strokes of objects.
By using the Gradient tool we can choose two end colors (Stops) and create a smooth transition between them.
Blending isn't limited to only two colors, and gradients can have many intermediate color stops in between the end stops. By default adding a stop to a gradient creates a linear blend between colors, but by moving the stops we can make it non-linear.
Inkscape comes with a Gradient tool that allows on-canvas editing of gradients, making the whole process quick and easy to master. It can also be accessed through the Fill and Stroke dialogue.
Getting ready
Start Inkscape, open the Fill and Stroke (Shift + Ctrl + F) dialogue window, and make sure that the Inkscape default color palette is the active one.
How to do it...
The following steps will show us how to create linear gradients:
- Select Ellipse tool (F5).
- Click and drag while holding Ctrl key to create a circle.
- Make the fill and stroke Maroon (#800000) by clicking and Shift-clicking the color chip in the color palette.
- Increase stroke width to 100 or 200 on the Stroke style tab on the Fill and Stroke dialogue window (the actual number depends on the size of the object).
- Select Gradient tool
(G). - Click inside the ellipse near the top, drag towards the bottom holding the Ctrl key and release to create a vertical, transparent and maroon colored fill gradient.
- Make the second color stop Red (#FF0000) by clicking on the color chip from the palette (the second color stop marked with circle is automatically selected after you stop dragging with the Gradient tool).
- On the Gradient toolbar select the button Create gradient in the stroke instead of the Create gradient in the fill.
- Click inside the ellipse near the bottom, drag towards the top holding the Ctrl key and release to create a vertical transparent maroon stroke gradient. If the handles snap together, simply press Ctrl + Z to start over, or temporarily disable the Snap node or handles button. Our object should now look like the following:
- Make the second color stop Red (#FF0000) by clicking on the color chip from the palette (the second color stop marked with circle is automatically selected after you stop dragging with the Gradient tool).
- This is the final circle with vertical gradients applied to both fill and stroke:
How it works...
Just like flat color, gradients can also be applied to an object's fill and stroke. Inkscape doesn't come with a set of ready-made gradients so we have to create our own.
To create a gradient you select an object (or objects) and simply drag on the Canvas using the Gradient tool (it doesn't have to be inside the selected object but it will affect the color of the stops), or select Linear gradient 
on the Fill or Stroke paint tab in Fill and Stroke dialogue window.
To be able to edit gradients easily they are represented by a gradient path, blue for fill and green for stroke. The gradient path doesn't have to be located inside the object it is applied to.
The first color stop is always marked with a square, the end one with a circle and all the intermediate ones with a diamond. The intermediate ones can be created by double-clicking on the gradient path where you want the new stop to appear. The new stop will be automatically colored in a way that doesn't change the current gradient look.
If the object we're trying to paint with a gradient has a flat color applied and we start dragging with the Gradient tool, inside the object, both start and end stops will inherit that color, only the start stop will be fully opaque and the end stop will be fully transparent.
We can also drag outside the object. In this case, the gradient will start with the color of the object under our mouse pointer, and finish with a fully transparent one. If the color of the object has not been set, the last used color will be selected and applied.
Color stops can be selected one by one by clicking on them with the Gradient tool, or many at once by holding Shift while making a rectangle selection around them. When selected their colors can be changed just like flat colors; using the Fill and Stroke boxes, Fill and Stroke dialogue, clicking the color palette color chips or dragging the color chips and dropping them on top of the gradient color stop.
Dragging a color chip from a palette and dropping it on a gradient path will automatically create a new color stop of the dragged color. This is depicted in the following image; the left screenshot shows how the mouse pointer changes as we drag an orange chip to the gradient path, and the right one shows the result you get after dropping the chip:
It is also possible to snap the end stops together so we can move both gradients at the same time. When we select the stop that is snapped to another one, the color boxes in the bottom left of the window and in the Fill and Stroke dialogue and the Style indicator will show the average of the two colors combined. To separate them again hold Shift while clicking and dragging either stop.
There's more...
Working with gradients doesn't stop there (pun intended). Several more options are available for us to make Inkscape gradients even more convenient and fun to use.
Gradient through multiple objects
Applying a gradient isn't restricted to just one object; it is possible to select more than one object and apply one gradient through all of them, with the same gradient path position. In the following image you can see a gradient with 10 color stops applied to the fills of three different objects at the same time:
Gradient repeat
In the examples seen so far we have seen that the colors blend between color stops that are on the gradient path. If the gradient path is shorter than the object, the area beyond the end stops are filled with flat color of the end stops.
There is a way to repeat gradients beyond their paths, and there are two choices you can make: reflected or direct. You can find this option in the Fill and Stroke dialogue when an object with a gradient is selected. In the following image we can see three objects with the same gradient applied, but with different Repeat options chosen:
Moving gradients along with objects
In most cases when we move an object that has a gradient we want the overall look of the object to remain intact. Since the gradient path isn't attached to the object itself we have to make it move along with the object it is attached to. This is accomplished by enabling the Move gradients (in fill or stroke) along with the objects button 
before moving the object. This button is located on the right-hand side of the Selector toolbar and is normally enabled by default.You have to switch to the Selector tool to use it, or you can set this option in Inkscape Preferences (Shift + Ctrl + P) | Transforms | Transform gradients.
Gradient sharing
There are many times when we need our objects to share colors. For example when creating a button set we want all our buttons to have the same look and feel. Perhaps the buttons need to fit into a website where blue palette dominates, so it makes sense to create bluish buttons. But what happens when we also want to use those buttons on a website where red is the primary color? Editing all the buttons one by one to adjust to a new base color is tedious and unnecessary.
Hopefully there is more than one way to solve our icon set problem, but here we'll describe only how sharing the same gradient between objects can help.
There is an option in Inkscape preferences under Misc that is on by default and prevents sharing of gradient definitions. So if you want to take advantage of sharing the same gradient between many objects you have to untick that box.
Once you do that, if you have objects styled with the same gradient and you modify that particular gradient by editing a stop, all the other objects "tagged" with that gradient will also be updated.
You can still share gradients between object even without selecting this option, by copying and pasting their style, but once you modify the gradient, it becomes a copy of the original and, therefore, independent.
The same applies to the gradient to the multiple objects case discussed earlier. If sharing gradients is prevented as soon as you change the gradient on one of those three objects a new gradient will be created for that object, and the other two will keep the old one.
Smoothing out abrupt color changes simulating non-linear gradients
In gradients with more than two color stops we sometimes get transitions that don't seem smooth enough. The sudden unevenness can be seen at the intermediate color stops when differences in color between consecutive stops are too large. Here is an example:
The left square seems to have a visible red line running through the middle. To make the area around the red stop smoother we create two additional stops very close to the red one. Create one a bit above the red stop, the other a bit below, and then move them away from the middle just a bit. The square on the right shows the final position of the stops.
The trick here is to guess where to create the additional stops and how much to move them away so you don't create more sharp changes. For best results, don't zoom in to add the stops, because that will put them too close to the middle one, and don't move them too far. Add more stops if the gradient is not smooth enough.
Moving intermediate stops along the gradient paths changes the blending dynamics so it's not linear any more looking at the whole gradient path between the end stops, although the blend is always linear between consecutive stops. This is how we simulate non-linear gradients using many smaller linear ones.
Reverse gradient orientation
Even though it is possible to simply drag the end stops of a gradient to change its orientation there is even a simpler way using the Shift + R shortcut:
This shortcut doesn't exchange the end stops positions like in the case when dragging them by hand. The start (square) and end (circle) stops haven't moved, only their colors have changed. If there are intermediate stops their positions are adjusted to the change in the orientation.
This shortcut is especially useful when dealing with radial gradients because we can't reverse the radial gradient orientation by dragging handles.
Remove unnecessary stops from complex gradients
When creating complex and multi-color gradients, it's easy to get carried away by an artistic frenzy and end up with more stops than necessary. Maybe we created an intermediate stop but didn't change its color, or moved it and forgot about it. That kind of stop doesn't add any new information to the gradient and can freely be removed without any worries that the gradient will be changed.
To remove unnecessary gradient stops first select all the stops on the gradient path you suspect might be redundant ones. Ctrl + A will select them all, and click while holding Shift and drag around them to select only the ones in the area encompassed. Once we have the selection we want, Simplify (Ctrl + L, or Menu | Path | Simplify 
) will do the rest.
Editing gradients using other tools
Gradients, once created, can be edited using other tools, such as Node, Tweak, Spray, Zoom, all of the shapes, Text, and Dropper. New stops can also be created by dragging color chips from the palette onto the gradient path.
This saves us from a lot of tool switching when dealing with gradient tweaks.
See also
For more information, refer to Recreating HAL 9000 using radial gradients, the recipe that follows.