What Is a CSS Gradient?
A gradient is a background type that creates a smooth transition between two or more colors. In modern web design it is widely used on buttons, hero areas and card backgrounds to add depth and vibrancy. This tool produces a valid CSS gradient definition from your two colors and angle, shows a live preview and lets you copy the code in one click.
Linear vs. Radial
- Linear: the colors transition along a straight line at the angle you set. 90° goes left-to-right, 180° top-to-bottom.
- Radial: the colors radiate outward from the centre in a circle. Ideal for a spotlight or soft vignette effect.
Tips
Close tones (for example two saturations of the same color) look more elegant and corporate; very contrasting colors grab attention but can look overdone. If text will sit on a gradient, verify readability with our Color Contrast Checker. For harmonious colors, use our Color Palette Generator. For bespoke, modern and fast interfaces, see our web design service.