# Add gradient colors to lines

**URL:** <https://openrndr.discourse.group/t/add-gradient-colors-to-lines/754>\
**Category:** How to?\
**Created:** [September 2, 2025, 11:15pm UTC](https://openrndr.discourse.group/t/add-gradient-colors-to-lines/754 "2025-09-02T23:15:56Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![anoniim](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/anoniim/32/383_2.png) [@anoniim](https://openrndr.discourse.group/u/anoniim)\
**Post date:** [September 2, 2025, 11:15pm UTC](https://openrndr.discourse.group/t/add-gradient-colors-to-lines/754/1 "2025-09-02T23:15:56Z")

</div>

I drew a shape composed of many lines.

 ![rose_1060.011-805.1521249999665](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/8d4f3199dd456fd796677e4d66caf60795d8b7c1.jpeg)

Can I add gradient to the lines going from the center to the edges?

I can’t change color of the lines separately. I draw them in a batch so they have to use the same drawer.

Therefore, I wonder if there are some alternative approaches. For example, can I use the lines (not the resulting shape they create) as a mask which exposes another image (with the gradient)?

An example of what I’d like to achieve:

 ![Generated Image September 03, 2025 - 12_03AM](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/e279e6299b947298973f064a7b4b92fcce2e1479.jpeg)

---

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [September 3, 2025, 10:05am UTC](https://openrndr.discourse.group/t/add-gradient-colors-to-lines/754/2 "2025-09-03T10:05:12Z")

</div>

Hi! Sure, there are many ways to colour lines. You can apply shade styles to anything you draw.

One approach could be to use the position in pixels along the length of a contour (if you are using contours):

```kotlin
drawer.stroke = ColorRGBa.WHITE
drawer.shadeStyle = shadeStyle {
fragmentTransform = """
    vec3 a = vec3(1.0, 0.0, 0.2);
    vec3 b = vec3(0.0, 0.2, 1.0);
    float t = sin(c_contourPosition * 0.03) * 0.5 + 0.5;
    x_stroke.rgb = mix(a, b, t);
""".trimIndent()

```

 ![2025-09-03_11:40:34](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/09f91ca6dc368bd5437445456456fb3031124e12.png)

Or you could calculate the color based on the [clip space](https://learnopengl.com/Getting-Started/Coordinate-Systems) coordinates:

```kotlin
fragmentTransform = """
    vec3 c = sin(v_clipPosition.xyz * 5.0) * 0.5 + 0.5;
    x_stroke = vec4(c, 1.0);
""".trimIndent()

```

 ![image](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/1febaa3186286a715205ef608ec949d8e0427622.png)

Then it’s just matter of playing with shader code.

Or work with images as you suggested, which you could load or generate yourself:

```kotlin
val img = loadImage("data/images/cheeta.jpg")
extend {
    drawer.stroke = ColorRGBa.WHITE
    drawer.shadeStyle = shadeStyle {
        fragmentTransform = """
            x_stroke = texture(p_image, gl_FragCoord.xy / p_resolution);
        """.trimIndent()
        parameter("image", img)
        parameter("resolution", drawer.bounds.dimensions)
    }
    drawer.clear(ColorRGBa.BLACK)
    drawer.contours(contours)
}

```

 ![image](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/a2f23d12a7cb5944122731e8ea5c563784d5af81.jpeg)

---

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [September 3, 2025, 10:18am UTC](https://openrndr.discourse.group/t/add-gradient-colors-to-lines/754/3 "2025-09-03T10:18:09Z")

</div>

By the way… there are many shade styles available in [orx/orx-shade-styles at master · openrndr/orx · GitHub](https://github.com/openrndr/orx/tree/master/orx-shade-styles) so you don’t need to write shaders yourself (many of them only available when using version 0.4.5).

I opened [this issue](https://github.com/openrndr/orx/issues/359) to be able to apply those same shade styles to strokes, not only fills.

Meanwhile I just figured out a little hack:

```kotlin
val img = loadImage("data/images/cheeta.jpg")
val ss = imageFill { image = img }
ss.fragmentTransform = ss.fragmentTransform?.replace("x_fill", "x_stroke")

```

Here I load an image and use the new `imageFill` shade style which works for fills only. But then in the next line I replace any mentions of x\_fill to x\_stroke and voilá! Now the style applies to lines instead 🙂