Realm by Rook|Utilities
    Gradient Generator

    Gradient Generator

    Create beautiful CSS gradients

    0%
    100%
    background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);

    Jums taip pat gali patikti

    Color Picker

    Pick colors and get hex, RGB, HSL values

    Color Converter

    Convert between HEX, RGB, HSL, and CMYK

    Favicon Generator

    Upload one image, get all 10 favicon sizes + manifest.json + HTML snippet

    About the Gradient Generator

    A CSS gradient fills an element with a smooth color transition — the backbone of modern hero sections, button states, and subtle UI depth. This generator builds the CSS string live and exports a matching PNG, so you can hand off the same gradient to developers (as CSS) and designers (as a flat image) in one click.

    Features

    How it works

    1. Pick two colors and a gradient type (linear or radial).
    2. Adjust the angle slider for linear gradients.
    3. See the live preview update.
    4. Copy the CSS or download a 2x PNG.

    Use cases

    Frequently asked questions

    Does the PNG match the CSS preview?

    +

    Yes — we project the CSS angle correctly onto canvas coordinates so 45° in your CSS is 45° in the exported image.

    Can I do three or more color stops?

    +

    Multi-stop gradients are on the roadmap. For now, the tool focuses on clean two-color gradients.

    What's a conic gradient?

    +

    A gradient that sweeps around a center point (like a pie chart). Supported in modern CSS but not yet in this tool — roadmap.

    Why isn't my downloaded PNG retina-resolution?

    +

    We export at 2x (1600×800 effective) via canvas scaling. For ultra-sharp brand assets, use SVG — we're adding SVG export.