Gradient
Build linear, radial, and conic gradients and copy the CSS. Everything below runs in your browser — no server call, no tracking.
Settings
Popular Gradients
Preview
Gradient Types
Linear: Transition along a straight axis (angle-defined). Radial: Circular or elliptical spread from center. Conic: Sweep around a center point (pie-chart style). Mesh: Multi-point gradients with independent color control per vertex — available in Illustrator, Figma plugins, and 3D software for complex surface shading.
Digital & Media Usage
Gradients in CSS use angle, color stops, and position percentages. In motion graphics, animated gradients add depth and energy. For 3D, gradients become material properties — metallic reflections, subsurface scattering, ambient occlusion. In print, gradients need careful CMYK conversion and sufficient DPI to avoid banding artifacts.
Material Patterns & 3D
Gradients define material perception: matte surfaces use subtle, wide gradients; glossy surfaces use tight, high-contrast highlights. Metallic materials combine sharp reflections with smooth gradient falloffs. In UI design, gradient backgrounds create depth layers without borders. Glass morphism and aurora effects rely entirely on multi-stop gradient compositions.
GIFs & Animation Impact
Gradients significantly increase GIF file size due to the many unique colors per frame. For small animated GIFs, prefer flat colors or dark palettes with minimal gradient area. Dithering helps but adds noise. For animated gradients, use MP4/WebM video instead of GIF. In motion design, keep gradient animations subtle — large shifting areas multiply encoding cost and can cause banding on compression.