The Color Gradient effect fills your screen with a smooth, animated-free blend between two colors, rendered live in the browser rather than as a static image. Choose a straight-line Linear sweep or a Radial glow from the center, and use it as a clean backdrop for a video call, a stream overlay, or a branded title screen.
Before you start
- No Brightness or Color Temperature sliders here. This effect turns off the shared controls, so your two chosen colors are the only thing setting the screen's overall tone and brightness — pick a lighter Start or End Color if you need more output, rather than looking for a brightness dial.
- Hex codes ready, if you're matching a brand or deck. Both color pickers accept a typed hex value, so have your brand palette on hand if you want an exact match rather than an eyeballed one.
Set it up
- Open the Color Gradient effect.
- Select Start Color and choose or type the first color.
- Select End Color and choose or type the second color.
- Set Gradient Type to Linear for a straight-line blend or Radial for a glow from the center outward.
- If you chose Linear, set Angle to point the gradient in the direction you want.
- Set Transition Blur — low for a crisp line between the two colors, high for a soft, wide blend.
- Select Go Fullscreen to run it edge to edge.
You'll know it worked when the screen shows a smooth blend running between your two chosen colors, with no visible seam or rectangle — not the default indigo-to-pink unless you kept it.
What each control does
| Control | Range | Default | What it changes |
|---|---|---|---|
| Start Color | color picker | #6366f1 | The color at the gradient's origin — the beginning edge for Linear, the center for Radial. |
| End Color | color picker | #ec4899 | The color at the gradient's far end — the opposite edge for Linear, the outer edge for Radial. |
| Gradient Type | Linear or Radial | Linear | The overall shape: Linear draws a straight-line blend across the screen; Radial radiates outward from the screen's center regardless of Angle. |
| Angle | 0–360 | 90 | Rotates the direction of a Linear gradient. At 0 it runs left to right; at the default 90 it runs bottom to top; increasing the value rotates it further. Only affects Linear — it does nothing when Gradient Type is Radial. |
| Transition Blur | 0–100 | 50 | Width of the blend zone between the two colors. Low values give a hard, defined edge; high values stretch the blend so wide that the pure colors barely show, giving a soft but flatter look. |
Common setups
- Branded presentation background. Enter your two brand hex codes as Start and End Color, Gradient Type Linear, Angle 90 for a vertical blend (or 135 for a diagonal one), Transition Blur 40–50 for a smooth, professional fade.
- Bold duotone for social or streaming. Keep the default indigo and pink, or pick a high-contrast pair, and drop Transition Blur to 15–20. The tighter blend zone keeps both colors reading as distinct rather than merging into a middle tone.
- Soft radial backdrop. Gradient Type Radial, a light Start Color in the center fading to a darker End Color, Transition Blur 60–70 for a gentle vignette-style falloff with no hard ring visible.
- Sharp two-tone split. Linear, Angle 0 or 90 depending on whether you want a vertical or horizontal split, Transition Blur near 5–10 for a near-hard line, like a flag or banner background.
Troubleshooting
There's a hard, visible line between my two colors instead of a smooth blend. Transition Blur is set low. Raise it — 40–60 gives a soft, gradual transition, while anything under 15 keeps the edge crisp on purpose.
My gradient looks like one flat, washed-out color instead of two. Transition Blur is set too high, near 100. At that setting the blend zone is stretched so wide that the screen rarely shows either color at full strength. Bring it back down toward 20–40 to see both colors clearly again.
The Angle slider doesn't change anything. Check Gradient Type. Angle only steers a Linear gradient's direction; it stays on screen and adjustable even when Gradient Type is set to Radial, but Radial gradients don't use it, so moving it has no visible effect until you switch back to Linear.
The gradient runs a different direction than I expected for the angle I set. Angle 0 runs left to right, and the default of 90 runs bottom to top — it's not a compass bearing from the top of the screen. Increasing the value rotates the gradient further from there; try adjusting in one direction and watch which way it turns before dialing in an exact number.
My colors and slider values are gone after reloading. Custom control values aren't saved between page loads — this is true for every effect, not just this one. Keep your hex codes and slider numbers noted somewhere if you'll want the same look again.
I want the bright point of a Radial gradient off to one side, but it won't move. There's no position control for Radial gradients — they're always centered on the screen. Switch to Linear and point Angle toward the corner or edge you want instead.
Next steps
If you want motion instead of a static blend, try Particle Effects for an animated background. For a version that draws the eye to one point rather than filling the whole screen, Spotlight works well behind the same kind of presentation or brand moment.