Gradient
A smooth transition between two or more colours. Available in linear, radial, and conic varieties for backgrounds, masks, and artistic effects.
A gradient is a continuous, smooth transition between two or more colours. It is a fundamental technique in print design, web design, and image processing, creating depth and movement that flat colours cannot achieve.
Primary gradient types:
- Linear Gradient: Colour transitions along a straight line in a specified direction. In CSS:
linear-gradient(to right, #000, #fff) - Radial Gradient: Colour radiates outward from a centre point in concentric circles. Used for light-source effects and vignettes
- Conic Gradient: Colour transitions around a centre point by angle. Ideal for pie charts and colour wheels. Implemented via CSS
conic-gradient() - Diamond Gradient: Expands in a diamond shape from the centre. Available in image editors like Photoshop
A critical quality concern is banding - visible colour steps in smooth transitions. With 8-bit colour (256 levels per channel), subtle gradients over large areas reveal discrete steps. Mitigation strategies include applying dithering or working in 16-bit mode during editing.
Gradient maps are another powerful technique: they remap an image's luminance values to colours along a gradient, producing duotone or tritone effects. This is extensively used in colour grading and artistic post-processing to establish mood and visual identity.
In modern CSS, gradients are resolution-independent (rendered as vectors), consume zero network bandwidth, and support multiple colour stops with precise positioning. They serve as performant alternatives to background images for decorative elements.