DevBolt
Processed in your browser. Your data never leaves your device.

How do I create a CSS gradient online?

Pick your colors, adjust the angle or direction, and see a live preview of your gradient. The tool generates production-ready CSS for linear, radial, and conic gradients. Copy the CSS with one click and paste it directly into your stylesheet. Everything runs in your browser.

Two-color linear gradient
Input
Direction: to right
Color 1: #3B82F6
Color 2: #8B5CF6
Output
background: linear-gradient(
  to right,
  #3B82F6,
  #8B5CF6
);
← Back to tools

CSS Gradient Generator

Create beautiful CSS gradients visually. Adjust colors, stops, angles, and copy the CSS.

Type:
deg

Color Stops (2)

0%
100%

CSS Output

background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

Presets

About CSS Gradients

Linear gradients transition colors along a straight line defined by an angle.0deggoes upward, 90deggoes right, 180deggoes downward.

Radial gradients radiate outward from a center point. Choose between circle(equal radius) and ellipse(stretches to fit the element).

Color stops define where each color appears along the gradient (0% = start, 100% = end). Add more stops for complex multi-color gradients.

Tips & Best Practices

Pro Tip

Use oklch() color space for perceptually smooth gradients

CSS linear-gradient in sRGB can produce muddy grays in the middle of a gradient (especially blue-to-yellow). Using color interpolation in oklch — background: linear-gradient(in oklch, blue, yellow) — produces vibrant, perceptually uniform transitions. Supported in all modern browsers since 2023.

Common Pitfall

Gradients with too many color stops slow rendering

Each color stop in a CSS gradient adds a calculation per pixel during paint. Gradients with 8+ stops on large elements can cause noticeable frame drops during scroll, especially on mobile. Use 2-4 stops for backgrounds. For complex gradients, consider a pre-rendered image with proper caching.

Real-World Example

Repeating gradients create stripes and patterns without images

repeating-linear-gradient(45deg, #000 0 10px, transparent 10px 20px) creates diagonal stripes with zero HTTP requests. Combine with background-size and background-blend-mode for complex patterns. This eliminates image assets for decorative backgrounds and reduces page weight.

Security Note

Gradients in email HTML have minimal client support

Outlook, Gmail, and Yahoo Mail either ignore or partially support CSS gradients. Always provide a solid background-color fallback before your gradient declaration. For email, use a background image hosted on a CDN rather than relying on CSS gradient rendering.

Frequently Asked Questions

How do I create a CSS linear gradient with a specific angle?
Set the gradient type to linear and adjust the angle. The angle controls the direction: 0deg flows bottom to top, 90deg left to right, 180deg top to bottom, 270deg right to left. You can also use keyword directions like to right or to bottom left. The generated CSS uses syntax like background: linear-gradient(135deg, #color1 0%, #color2 100%). DevBolt's Gradient Generator updates the preview in real time as you adjust angle, colors, and stop positions.
How do I create a radial CSS gradient?
Switch to radial gradient mode and configure the shape (circle or ellipse), size, and center position. A radial gradient transitions colors outward from a center point. You can control the origin using percentage positions and size keywords like closest-side or farthest-corner. Radial gradients work well for spotlight effects, glowing buttons, circular backgrounds, and vignette overlays. Add multiple color stops for more complex transitions.
Can I use CSS gradients as backgrounds for text?
Yes, apply gradients to text using background-clip and text-fill-color. Set the gradient as the element's background, then add -webkit-background-clip: text and background-clip: text to clip it to the text shape. Set -webkit-text-fill-color: transparent and color: transparent to make the text invisible so the gradient shows through. This technique works in all modern browsers and creates eye-catching gradient text effects for headings and hero sections. Include both -webkit- prefixed and unprefixed versions.

Related Generate Tools

META

Meta Tag Generator

Generate SEO, Open Graph, and Twitter Card meta tags with live Google and social previews

.gi

.gitignore Generator

Generate .gitignore files from 50+ templates — Node.js, Python, Java, Go, Rust, and more

⏰

Crontab Generator

Build cron expressions visually — select frequency, time, and days to generate cron schedules

FAV

Favicon Generator

Generate favicons from text or emoji — download PNGs, SVG, Apple Touch Icon, and HTML tags