Home/ Questions/Q 38909
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T14:46:55+00:00

I need to put an alpha blended gradient border around an image. My problem

  • 0

I need to put an alpha blended gradient border around an image. My problem is in blending the corners so they are smooth where the horizontal and vertical gradients meet. I believe there is a standard algorithm that solves this problem. I think I even encountered it in school many years ago. But I have been unsuccessful in finding any reference to one in several web searches.

(I have implemented a radial fill pattern in the corner, but the transition is still not smooth enough.)

My questions:

  1. If there is a standard algorithm for this problem, what is the name of it, and even better, how is it implemented?

  2. Forgoing any standard algorithm, what’s the best way to determine the desired pixel value to produce a smooth gradient in the corners? (Make a smooth transition from the vertical gradient to the horizontal gradient.)

EDIT: So imagine I have an image I will insert on top of a larger image. The larger image is solid black and the smaller image is solid white. Before I insert it, I want to blend the smaller image into the larger one by setting the alpha value on the smaller image to create a transparent ‘border’ around it so it ‘fades’ into the larger image. Done correctly, I should have a smooth gradient from black to white, and I do everywhere except the corners and the inside edge.

At the edge of the gradient border near the center of the image, the value would be 255 (not transparent). As the border approaches the outside edge, the alpha value approaches 0. In the corners of the image where the vert & horiz borders meet, you end up with what amounts to a diagonal line. I want to eliminate that line and have a smooth transition.

What I need is an algorithm that determines the alpha value (0 – 255) for each pixel that overlaps in the corner of an image as the horizontal and vertical edges meet.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Presumably you’re multiplying the two gradients where they overlap, right?

    Dunno about a standard algorithm. But if you use a signoid shaped gradient instead of a linear one, that should eliminate the visible edge where the two overlap.

    A simple sigmoid function is smoothstep(t) = tt(3 – 2*t) where 0 <= t <= 1

    • 0