Home/ Questions/Q 7053343
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T03:29:36+00:00

I am attempting to create an arrow that looks like this using SVG elements:

  • 0

I am attempting to create an arrow that looks like this using SVG elements:

enter image description here

This is my attempt:

enter image description here

As you can see the gradient gets applied to both the rect & the polygon in my SVG. Is there a way to replicate the gradient effect in the top image in my SVG?

Maybe theres a CSS way to do this? Maybe I HAVE to use a path or single polygon element to create the arrow instead of a rect & polygon?

<svg width="424" height="100">
    <defs>
        <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
          <stop offset="100%" style="stop-color:rgb(13,20,93);  stop-opacity:1" />
        </radialGradient>
    </defs>

    <rect x="0" y="25" rx="0" ry="0" width="212" height="50" fill="url(#grad1)"> </rect>
    <polygon points="212,0 212,100 424,50" fill="url(#grad1)"></polygon>
</svg>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I used two gradients to attempt to recreate what you were trying to do. You can adjust the center of the gradient to align with the edges of the shapes:

    <svg width="424" height="100">
    <defs>
        <radialGradient id="grad1" cx="100%" cy="50%" r="100%" fx="100%" fy="50%">
          <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
          <stop offset="100%" style="stop-color:rgb(13,20,93);  stop-opacity:1" />
        </radialGradient>
        <radialGradient id="grad2" cx="0%" cy="50%" r="50%" fx="0%" fy="50%">
          <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
          <stop offset="100%" style="stop-color:rgb(13,20,93);  stop-opacity:1" />
        </radialGradient>
    </defs>
    <rect x="0" y="25" rx="0" ry="0" width="212" height="50" fill="url(#grad1)"> </rect>
    <polygon points="212,0 212,100 424,50" fill="url(#grad2)"></polygon>
</svg>

    Demo

    Is there something wrong with a single polygon though?

    <svg width="424" height="100">
    <defs>
        <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
          <stop offset="100%" style="stop-color:rgb(13,20,93);  stop-opacity:1" />
        </radialGradient>
    </defs>

    <polygon points="212,0 212,25 0,25 0,75, 212,75 212,100 424,50" fill="url(#grad1)"></polygon>
</svg>
    • 0