Virtuosoft Logo

CSS Gradient Generator

The right tool to generate css linear-gradient, repeating-linear-gradient, radial-gradient or repeating-radial-gradient with any number of stop points, direction and size.

Config Share permalink QR Code Get PNG

Presets

    Preview

    Gradient properties

    Simple Advanced Expert
    Current gradient needs advanced features so the desired layout is overwritten! ... Force change
    Current gradient needs expert features so the desired layout is overwritten! ... Force change

    Compatibility

    CSS is always generated for all browsers, but the generated gradient may look different in older browsers (depends on the features - using two or more stop points, explicit or implicit sizes).

    Simple mode

    IE6+, Android 2.3+, iOS 3.2+
    Only two point linear gradients are supported with horizontal or vertical direction.
    Utilizes only IE filter, SVG and old webkit safe features.

    Advanced mode

    IE9+, Android 3.0+, iOS 3.2+, WP7.5+
    Supports multiple stop points, diagonal linear gradients and implicitly sized radial ellipse gradients.
    Utilizes only SVG safe features.

    Expert mode

    IE10+, Android 4.0+, iOS 5.0+, Chrome 26+, Firefox 16+, Opera 12.1+
    These browsers are supporting all CSS3 standard features (explicit radial gradient sizes, explicit center position, angled linear gradients).
    Utilizes all CSS3 features.

    Updates

    • : Added support for mixed color stop units.
      Slightly better page scrolling performance.
    • : Major update with many new features.
    • : Better preview resize.
    • : Fixed gradient initialization issue in some special cases.
    • : Using Bootstrap Color Picker Sliders instead of jQuery Color Picker Sliders, which results in much faster stop point list generation when loading a swatch or a permalink with many stop points.

    Features

    • Generates CSS3, SVG, old webkit, newer webkit and IE filter gradients that actually tested and works in all browsers (old and new)
    • Three layout that you can choose from according to your needs
    • Highly optimized responsive interface to support many devices
    • Save and export customized gradient presets
    • Quickly check your gradient in a mobile browser with a QR code
    • Share your gradient with anyone (unique PNG is getting generated for your permalink!)
    • Gradient color adjuster, which works in the CIE Lab color space
    • Colors can be set with any CSS color format (the output format is configurable rgb/hsl/hex)
    • Solid opaque colors are converted to IE filter gradients so transparency works in IE8 and below (fallback for the missing rgba support)

    Why did we make another online CSS Gradient Generator?

    We tried out many gradient generators, but did not find one that supports all standard gradient features and is still easy to use, or the generated code simply didn't worked in some older browsers... Another reason was that we’re working on a larger project for which we needed this function. Please don't forget to follow us if you like this tool, because more is to come! ;)