CSS Gradient Generator

Config Share permalink QR Code Get PNG

Presets

    Preview

    Gradient properties

    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.

    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)

    Credits

    Thank to Istvan Ujjmeszaros at virtuosoft.eu for this amazing gradiant generator. View on GitHub



    Like this page