Gradient along a path

gradient inkscape
mmumboss picture mmumboss · Mar 12, 2013 · Viewed 10.9k times · Source

Is it possible to create something like this in inkscape? I have been searching and trying for quite some time, but so far no results...

So what I am looking for is a gradient which follows the direction of the path it is applied to.

Gradient along a path http://coreldraw.com/cfs-filesystemfile.ashx/__key/CommunityServer.Components.PostAttachments/00.00.02.07.23/GradientBlend2.jpg

Answer

Stockfisch picture Stockfisch · Mar 13, 2013

I am not aware of a solution that perfectly satisfies your needs however here is one approach to get close:

  • Draw a line, open the Fill and Stroke dialog and set the width of the stroke (Stroke style tab) to 50. Transform the stroke to a path (Path > Stroke to Path).
  • Fill the path with a linear gradient (Fill and Stroke dialog > Fill > Linear gradient) and choose any colours you like.
  • Select the node tool (F2) and a line will appear stretching the area of your shape (marked with an exclamation mark on the picture below). Adjusting this line may help you to fine tune the gradient (however, strictly speaking it will not follow the path but a rectangle defined by the start and end marker of the marked line)

This should work for simple shapes that do not reverse. Let me know if this is good enough or if you need more detailed instructions.

enter image description here

Related questions

How do I combine a background-image and CSS3 gradient on the same element?

How do I use CSS3 gradients for my background-color and then apply a background-image to apply some sort of light transparent texture?

Read More
Gradient borders

I'm trying to apply a gradient to a border, I thought it was as simple as doing this: border-color: -moz-linear-gradient(top, #555555, #111111); But this does not work. Does anyone know what is the correct way to do border gradients?

Read More
How to make gradient background in android

I want to create gradient background where the gradient is in the top half and there's a solid color in the bottom half, like in this image below: I can't because the centerColor spreads out to cover the bottom and …

Read More