Skip to main content
dubinity

Design & Accessibility

Gradient Image Generator

Make linear, radial and conic gradient images for backgrounds, wallpapers and social posts - and copy the CSS.

  • Runs in your browser
  • Works on mobile
  • In: Colours
  • Out: PNG, JPG, WEBP, CSS
Loading the tool…

Your files and text are processed on your own device, inside this page. Nothing is uploaded to Dubinity or stored, and closing the tab discards it. How privacy works

About Gradient Image Generator

Pick a type, set the angle, drag up to six colour stops and download the result at wallpaper, story, square or banner size - or any size you type. The preview is drawn by the same code as the download, so there are no surprises. A grain slider adds fine noise, which is what stops a smooth gradient from banding into visible stripes on an 8-bit screen or in a JPEG. The matching CSS copies with one click, so the same gradient can live in your stylesheet instead of as an image.

Questions

Was this tool helpful?

Related tools

All design tools

  • Colour Palette Extractor

    Pull the dominant colours out of any picture and copy them as HEX, RGB, HSL, CSS variables or JSON.

    JPG · PNG · WEBP
    Runs in your browserOpen tool

  • Image Colour Picker

    Pick any colour out of a picture - with a magnifier - and copy it as HEX, RGB, HSL, HSV or CMYK.

    JPG · PNG · WEBP
    Runs in your browserOpen tool

  • Social Media Image Resizer

    Resize a photo to Instagram, Facebook, X, LinkedIn, YouTube, TikTok or Pinterest sizes - or all of them at once.

    JPG · PNG · WEBP
    Runs in your browserOpen tool

  • Color Converter

    Convert a colour between HEX, RGB, HSL, HSV, HWB, CMYK and OKLCH, with contrast against black and white.

    TEXT
    Runs in your browserOpen tool

  • Lorem Ipsum Generator

    Generate placeholder paragraphs, sentences or words, in classic Latin or in Arabic filler text.

    NONE
    Runs in your browserOpen tool

  • Color Palette Generator

    Generate colour palettes from a base colour and a harmony, or at random with locks, then export CSS, tokens, Tailwind or a PNG.

    HEX · RGB · HSL
    Runs in your browserOpen tool