Dev Tools

CSS Gradient Generator

Generate CSS linear and radial gradients with live preview. Pick colors, adjust angles, and copy the code.

Quick Answer

CSS gradients use the background property: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); — adjust the angle and colors to match your design.

Presets:
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

About This Tool

The CSS Gradient Generator creates production-ready CSS gradient code with a live visual preview. Gradients are one of the most commonly used CSS properties for adding visual depth and interest to websites. This tool supports both linear and radial gradients, lets you pick any two colors, adjust the angle and color stops, and copy the code in one click.

Linear vs. Radial Gradients

Linear gradients transition colors along a straight line defined by an angle. A 0-degree gradient goes from bottom to top, 90 degrees goes left to right, and 180 degrees goes top to bottom. Radial gradients transition colors outward from a center point in a circular or elliptical shape. Linear gradients are more common for backgrounds and section dividers, while radial gradients work well for spotlight effects and button highlights.

Color Stop Positions

Color stops define where each color begins and ends in the gradient. By default, two colors split evenly (0% and 100%). Moving the stops closer together creates a sharper transition, while spreading them apart creates a softer blend. You can also create hard color boundaries by placing two stops at the same position, which is useful for striped or banded effects.

Browser Support

CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers. The syntax used by this generator does not require vendor prefixes. If you need to support very old browsers (IE9 and below), provide a solid fallback color before the gradient declaration.

Frequently Asked Questions

Can I add more than two colors?
Yes, CSS supports multiple color stops. Add additional colors separated by commas: linear-gradient(135deg, #color1 0%, #color2 50%, #color3 100%). This tool generates two-stop gradients, but you can edit the output to add more stops manually.
How do I make a gradient text effect?
Use background-clip: text with a transparent text color. Set background to your gradient, then add -webkit-background-clip: text and color: transparent. This clips the gradient to the text shape, creating a gradient-filled text effect.
What is the best angle for a gradient background?
135 degrees (top-left to bottom-right) is the most popular choice because it follows the natural reading direction and feels balanced. 180 degrees (top to bottom) is common for full-page backgrounds. The best angle depends on your design — experiment to find what complements your layout.
Can I animate CSS gradients?
CSS cannot animate the gradient itself directly because browsers do not interpolate between gradient values. However, you can animate the background-size or background-position properties to create movement effects, or use CSS custom properties (variables) with @property to animate individual color values.
How do I create a transparent gradient overlay?
Use rgba colors or the transparent keyword. For example: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%) creates a fade-to-black overlay commonly used on hero images with text.

You might also like

Dev Tools

JSON to YAML Converter

Convert between JSON and YAML formats with real-time preview.

⏱ instantDev Tools

Base64 Encoder & Decoder

Encode and decode Base64 with URL-safe mode and file upload.

⏱ instantDev Tools

Color Contrast Checker

Check WCAG 2.1 AA & AAA contrast ratios with color blindness simulation.

⏱ instant