Canvas size: Grid: Click canvas to toggle grid display
SWGradient Controls
Gradient Colors
(300, 67, 60)
Color at the start of the gradient
(60, 100, 100)
Color at the end of the gradient
Gradient Angle
0° (Vertical)
90° (Horizontal)
360°
Rotates the gradient direction (counterclockwise)
🌈 About SWGradient + How to Use This Demo
SWGradient is a SketchWaveJS class that creates smooth linear gradients at any angle.
A gradient interpolates between two SWColor objects using HSB color space with intelligent hue wraparound for natural color transitions.
The class supports drawing gradients on the full canvas, full grid area, or within custom boxes.
About This Demo: Interactive Background Gradients
This demo showcases the SWGradient class's ability to create dynamic, full-screen gradient backgrounds. Features include:
Color Pickers: Choose any colors for the top/start and bottom/end of the gradient
Live HSB Feedback: See the HSB (Hue, Saturation, Brightness) values update in real-time as you adjust colors
Angle Control: Rotate the gradient from 0° (vertical) to 360° (full rotation), with counterclockwise progression
Grid Toggle: Click the canvas to show/hide the coordinate grid overlay
Control Panel Features
Top/Start Color: Color picker with hex color input, displays HSB triad in monospace format (h, s, b)
Bottom/End Color: Color picker with hex color input, displays HSB triad dynamically
Gradient Angle: Slider from 0° to 360° with live preview. At 0°, gradient flows from top to bottom; at 90°, from left to right
Save Image: Export the current gradient as a timestamped PNG file for use in other projects
How Gradients Work
HSB Interpolation: Colors blend smoothly in HSB space, preventing muddy browns that can occur in RGB interpolation
Hue Wraparound: Takes the shortest path around the color wheel (e.g., red to violet goes through magenta, not through all colors)
Angle System: 0° points downward (top color at top), angles increase counterclockwise (90° = left to right, 180° = bottom to top, 270° = right to left)
Coordinate System: Gradients can be drawn in screen coordinates with draw(), grid coordinates with drawOnGrid(), or within boxes with drawBoxOnGrid()
Tips for Exploration
Try complementary colors (opposite on color wheel) like purple (300°) and yellow (60°) for vibrant gradients
Use analogous colors (neighbors on color wheel) like blue (240°) and cyan (180°) for harmonious blends
Experiment with low saturation (grayish tones) for subtle, professional-looking backgrounds
Adjust the angle to create diagonal gradients (45°, 135°, 225°, 315°) for dynamic compositions
Notice how the HSB triads update—observe how different hex colors map to hue values (0-360)
Click the canvas to toggle the grid and see how the gradient fills the coordinate space
Learn More
For complete documentation including constructor parameters, all three drawing methods (draw(), drawOnGrid(),
drawBoxOnGrid()), HSB interpolation details, and advanced code examples,
see the Full SWGradient Reference Guide.