Media, text & generated visuals
Gradient
Create a background or shape with changing colors.
Before you start
Open the intended collection and layout. For capture or network inputs, have the device or sender available.
Where to find it
Sources > Add > Gradient.
Use it
- Open the scene that will contain the source.
- Choose Add in Sources.
- Select Gradient in Create Source.
- Enter a name and choose New.
- Choose the gradient type.
- Set the start/end colors and offsets.
- Use Add Stop for intermediate colors.
- Set direction or center/radius for the chosen type.
- Set opacity and item size.
- Choose Save and Close (or OK where shown).
- Check the source in Preview before taking it to Program.
Controls and additional tasks
Types include Linear, Linear (Reflected), Diamond, Radial, Conical, Spiral (Clockwise), and Spiral (Counter Clockwise). Intermediate stops have a color, offset, and Remove action. Smoothness changes color blending. Width and Height are 1–8192 pixels. Opacity adjusts gradient-color transparency.
Control reference
| Control | Use |
|---|---|
| Width | Selected Gradient Source transform width in pixels. Range: 1 to 8192. |
| Width | Adjust selected Gradient Source transform width. Double-click the thumb to reset to the value from when this dialog opened. Minimum: 1; Maximum: 8192. |
| Height | Selected Gradient Source transform height in pixels. Range: 1 to 8192. |
| Height | Adjust selected Gradient Source transform height. Double-click the thumb to reset to the value from when this dialog opened. Minimum: 1; Maximum: 8192. |
| Type | Choose the Gradient shape: Linear, Linear (Reflected), Diamond, Radial, Conical, or Spiral. |
| Opacity | Exact alpha percentage for all gradient colors. |
| Opacity | Adjust all gradient color alpha channels. Double-click the thumb to reset to the value from when this dialog opened. Minimum: 0; Maximum: 100. |
| Start color | Choose the start color. Its alpha is kept in the color value. |
| End color | Choose the end color. New Gradient Sources default this color to black. |
| Start offset | Start stop position from 0.00 to 1.00. |
| Start offset | Adjust the start stop position. Double-click the thumb to reset to the value from when this dialog opened. Minimum: 0; Maximum: 1. |
| Add Stop | Add an intermediate gradient stop between the current start and end offsets. |
| Stop color | Choose the intermediate stop color. |
| Stop offset | Intermediate stop position between the start and end offsets. |
| Stop offset | Adjust the intermediate stop position. It must stay between the start and end offsets. Minimum: 0; Maximum: 1. |
| Remove | Remove this intermediate gradient stop. |
| End offset | End stop position from 0.00 to 1.00. |
| End offset | Adjust the end stop position. Double-click the thumb to reset to the value from when this dialog opened. Minimum: 0; Maximum: 1. |
| Smoothness | Transition smoothness between stops from 0 to 100 percent. |
| Smoothness | Adjust transition smoothness between gradient stops. Double-click the thumb to reset to the value from when this dialog opened. Minimum: 0; Maximum: 100. |
| Angle | Direction or rotation angle in degrees for the selected Gradient type. |
| Angle | Adjust Gradient direction or rotation angle. Double-click the thumb to reset to the value from when this dialog opened. Minimum: 0; Maximum: 359. |
| Center X | Gradient center X from 0 to 100 percent. |
| Center X | Adjust Gradient center X. Double-click the thumb to reset to the value from when this dialog opened. Minimum: 0; Maximum: 100. |
| Center Y | Gradient center Y from 0 to 100 percent. |
| Center Y | Adjust Gradient center Y. Double-click the thumb to reset to the value from when this dialog opened. Minimum: 0; Maximum: 100. |
| Radius X | Gradient radius X from 1 to 100 percent. |
| Radius X | Adjust Gradient radius X. Double-click the thumb to reset to the value from when this dialog opened. Minimum: 1; Maximum: 100. |
| Radius Y | Gradient radius Y from 1 to 100 percent. |
| Radius Y | Adjust Gradient radius Y. Double-click the thumb to reset to the value from when this dialog opened. Minimum: 1; Maximum: 100. |
| Save and Close | Save Gradient Source settings. Shortcut: Ctrl+S. |
| Cancel | Close without saving changes. |
Example
Create a two-color linear background for a title card.
Stop or remove
Hide the source to stop showing its picture. Use its available playback/connection stop control when you need to stop the input itself. Remove the source item from the scene when it is no longer needed. Shared sources can still be used in other scenes.
Keys in this feature
| Key | Action | Type |
|---|---|---|
| Ctrl+S | Save and close | Built-in shortcut |
Related pages
Solid · Keyboard shortcuts · Menu reference · Manual contents