Skip to main content

    CSS Gradient Generator

    Generate beautiful CSS gradients visually. Pick colours, adjust angle, and copy the CSS code.

    Free to use. Runs in your browser.

    Generate CSS linear, radial, or conic gradients with live preview. Copy the CSS directly into your stylesheet or design system.

    CSS Code

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

    CSS Gradients: A Complete Guide

    Gradients are one of the most underused tools in a developer's CSS toolkit. They create smooth colour transitions without images, meaning zero extra HTTP requests, infinite scalability, and tiny file sizes. A gradient that would be a 50KB PNG is just one line of CSS.

    CSS supports three types: linear (straight lines), radial (circular/elliptical), and conic (angular, like a pie chart). Linear gradients cover 90% of real-world use cases, hero backgrounds, buttons, overlays, and decorative elements.

    This generator gives you a visual preview with adjustable colours, angles, and stops. Copy the CSS and paste it directly into your stylesheet. Browser support is universal, gradients work in every modern browser without prefixes.

    Gradient Types Compared

    TypeSyntaxBest For
    Linearlinear-gradient(to right, #000, #fff)Backgrounds, buttons, overlays, hero sections
    Radialradial-gradient(circle, #000, #fff)Spotlights, glows, vignette effects
    Conicconic-gradient(from 0deg, #000, #fff)Pie charts, colour wheels, progress rings
    Repeating linearrepeating-linear-gradient(45deg, ...)Stripes, diagonal patterns, progress bars

    Gradient Tips for Developers

    Avoid the grey zone

    Gradients between complementary colours (e.g., blue→orange) pass through muddy grey. Add a mid-point colour to keep the transition vibrant. Blue→purple→orange looks far better than blue→orange.

    Use gradients for text overlays

    A subtle gradient from transparent to rgba(0,0,0,0.7) makes white text readable over any image. Much more elegant than a solid dark overlay.

    Layer multiple gradients

    CSS supports stacking gradients with commas. Combine a radial spotlight with a linear tint for depth: background: radial-gradient(...), linear-gradient(...).

    Performance is excellent

    CSS gradients are rendered by the GPU with near-zero performance cost. They're faster than images and scale perfectly to any resolution, including Retina displays.

    Popular Gradient Presets

    Starting from scratch is hard. These proven combinations work well for common UI elements:

    NameCSSUse Case
    Sunsetlinear-gradient(135deg, #f093fb, #f5576c)Hero backgrounds, CTAs
    Oceanlinear-gradient(135deg, #667eea, #764ba2)SaaS landing pages, cards
    Mintlinear-gradient(135deg, #11998e, #38ef7d)Success states, eco themes
    Midnightlinear-gradient(135deg, #0c0c1d, #1a1a3e)Dark mode backgrounds
    Glasslinear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0))Glassmorphism overlays
    Text fadelinear-gradient(to bottom, transparent, var(--bg))"Read more" content cutoff

    135deg is the most popular gradient angle in modern design, it goes from top-left to bottom-right, which feels natural because we read in that direction.

    Related Tools

    CSS Box Shadow Generator

    Create custom box shadows visually

    CSS Border Radius Generator

    Design rounded corners with preview

    Colour Converter

    Convert between HEX, RGB, HSL

    Colour Palette Generator

    Generate harmonious colour schemes

    CSS Minifier

    Minify CSS for production

    CSS Beautifier

    Format CSS for readability

    How to use this tool

    1

    Choose linear or radial gradient type

    2

    Pick two colours using the colour pickers or enter hex codes

    3

    Adjust the angle with the slider (linear) and copy the CSS

    Common uses

    • Creating hero section backgrounds
    • Styling buttons and cards with colour transitions
    • Adding overlay effects on images
    • Designing decorative UI elements
    • Building colour-based loading indicators

    Share this tool

    Frequently Asked Questions

    What is a CSS gradient?
    A CSS gradient creates a smooth transition between two or more colours, rendered as a background-image. Unlike image files, gradients are generated by the browser, zero HTTP requests, infinite scalability, and tiny file sizes. A gradient that would be a 50KB PNG is just one line of CSS.
    What types of gradients does CSS support?
    Three types: linear-gradient (straight lines at any angle), radial-gradient (circular or elliptical from a centre point), and conic-gradient (angular, like a pie chart or colour wheel). Plus repeating variants of each. This tool generates linear and radial gradients.
    Can I use gradients on text?
    Yes. Set background: linear-gradient(...), then add background-clip: text and -webkit-text-fill-color: transparent. The gradient becomes the text colour. Works in all modern browsers, though you may need the -webkit- prefix for background-clip.
    How do I avoid the muddy grey in gradients?
    Gradients between complementary colours (blue→orange, red→green) pass through unsaturated grey in the middle. Fix: add a vibrant mid-point colour. Blue→purple→orange looks much better than blue→orange. The mid-colour guides the transition through colour space.
    Do CSS gradients work in all browsers?
    Yes. Linear and radial gradients have universal browser support without prefixes since 2013+. Conic gradients work in all modern browsers (Chrome 69+, Firefox 83+, Safari 12.1+). No polyfills needed for any current browser.
    Can I layer multiple gradients?
    Yes, CSS supports stacking backgrounds with commas. background: radial-gradient(...), linear-gradient(...) layers them. The first gradient is on top. This creates depth effects, noise overlays, and complex patterns without images.
    How do gradient stops work?
    Colour stops define where each colour appears along the gradient line. linear-gradient(to right, red 0%, blue 100%) is the default. Add stops: red 0%, yellow 50%, blue 100%. You can also create hard lines: red 50%, blue 50% for a sharp colour boundary.
    What angle values can I use?
    Degrees (0deg = bottom to top, 90deg = left to right, 180deg = top to bottom). Or use keywords: to right, to bottom left, to top right. The keyword form is often more readable, but degrees give precise control.
    Are CSS gradients performant?
    Extremely. Gradients are rendered by the GPU with near-zero performance cost. They're faster than loading and decoding image files, scale perfectly to any resolution (including Retina/4K), and don't trigger additional HTTP requests.
    How do I create a gradient border?
    Use border-image: linear-gradient(...) 1, or the modern approach: set the gradient as background, add background-origin: border-box, background-clip: padding-box, and a transparent border. The second method supports border-radius.
    Can I animate CSS gradients?
    Not directly, CSS can't transition between gradient values. But you can animate background-position or background-size on a larger gradient, or use CSS custom properties (variables) with @property to animate individual colour values. The @property approach is the smoothest.
    What's the difference between linear and radial gradients?
    Linear gradients flow in a straight line at any angle. Radial gradients radiate outward from a centre point in a circle or ellipse. Use linear for backgrounds, buttons, and overlays. Use radial for spotlight effects, glows, and vignettes.

    Results are for general informational purposes only and should be checked before use. They are not professional advice. See our Disclaimer and Terms of Service.