Gradient Tool
ASCII Motion's gradient system lets you create smooth transitions between characters, colors, or both. Gradients add depth, dimension, and visual interest to your ASCII art.
Quick access: Press G to activate the Gradient tool from anywhere in the application.
Gradient Types
Linear Gradients transition in a straight line from one edge to another.
░░░▒▒▒▓▓▓███
░░░▒▒▒▓▓▓███
░░░▒▒▒▓▓▓███
- Click and drag to set direction
- Hold
Shiftto constrain to 45° angles - Great for: shading, backgrounds, depth effects
Basic Usage
Select the Gradient Tool
Click the gradient icon in the toolbar or press G.
Choose Gradient Type
Select Linear, Radial, or Angular from the options panel.
Configure Stops
Set your gradient stops—the characters and/or colors at each point.
Apply the Gradient
Click and drag on the canvas to define the gradient direction and extent.
Character Gradients
ASCII art gradients often rely on character density to create the illusion of smooth transitions.
Standard Density Ramp
The classic ASCII density gradient uses characters with progressively more "ink":
Light → Dark:
. : - = + * # % @ █
Dark → Light:
█ @ % # * + = - : .
Extended Character Sets
For smoother gradients, use block characters:
░ ▒ ▓ █
Or combine with standard characters:
. · ∙ ░ ▒ ▓ █
The number of unique characters in your gradient determines how smooth the transition appears. More characters = smoother gradient.
Custom Character Ramps
Create your own character ramp for unique effects:
Open Gradient Editor
Click "Edit Ramp" in the gradient options.
Add Characters
Type or select characters in order from lightest to darkest.
Save Preset
Save your custom ramp for future use.
Example custom ramps:
| Name | Characters | Effect |
|---|---|---|
| Dots | . · • ● ⬤ | Soft, organic |
| Blocks | ░ ▒ ▓ █ | Sharp, digital |
| Lines | │ ║ ▐ █ | Vertical emphasis |
| Circles | ○ ◔ ◑ ◕ ● | Playful, modern |
Color Gradients
Beyond character density, you can create smooth color transitions.
Two-Color Gradients
The simplest gradient transitions between two colors:
Multi-Stop Gradients
Add multiple color stops for complex transitions:
Add Color Stop
Click on the gradient bar to add a new stop.
Position the Stop
Drag the stop to position it along the gradient.
Set Stop Color
Click the stop to open the color picker.
Repeat as Needed
Add as many stops as your design requires.
Color + Character Gradients
Combine both for maximum effect:
- Light colors with sparse characters at one end
- Dark colors with dense characters at the other
- Creates dramatic depth effects
Gradient Options
Dithering
Dithering adds noise to create smoother perceived gradients:
No Dithering creates clean, distinct bands.
░░░░▒▒▒▒▓▓▓▓████
░░░░▒▒▒▒▓▓▓▓████
Best for: sharp graphics, retro aesthetic
Spread Method
Control how the gradient behaves beyond its defined area:
| Method | Description |
|---|---|
| Pad | Extends the end colors |
| Repeat | Tiles the gradient |
| Reflect | Mirrors the gradient back and forth |
Opacity
Gradient opacity lets existing content show through:
- 100%: Completely replaces underlying content
- 50%: Blends with existing content
- 0%: No visible change (preview only)
Practical Applications
Shading Objects
Add dimension to flat shapes:
Before: After:
┌─────────────┐ ┌─────────────┐
│ │ │░░░░▒▒▒▓▓▓██│
│ │ │░░░░▒▒▒▓▓▓██│
│ │ │░░░░▒▒▒▓▓▓██│
└─────────────┘ └─────────────┘
Creating Depth
Use radial gradients for spotlight effects:
Background Atmospheres
Linear gradients create sky, sunset, or environmental effects:
░░░░░░░░░░░░░░░░░░░░ ← Light (sky)
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
████████████████████ ← Dark (ground)
Text Effects
Apply gradients to text for stylized typography:
░▒▓█ GRADIENT TEXT █▓▒░
Gradient Presets
ASCII Motion includes ready-to-use gradient presets:
Character Presets
- Classic:
. : - = + * # @ █ - Blocks:
░ ▒ ▓ █ - Minimal:
· ● █
Color Presets
- Sunset: Orange → Pink → Purple
- Ocean: Light Blue → Deep Blue
- Forest: Light Green → Dark Green
- Fire: Yellow → Orange → Red
- Monochrome: White → Black
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
G | Select Gradient tool |
X | Swap gradient direction |
Cmd/Ctrl + Z | Undo gradient |