Gradient Backgrounds - 22 Curated Presets

Twenty-two curated gradients ship in the Background panel's Gradient tab, grouped into four style categories: Vibrant (8 presets), Cool (5), Dark (5), and Soft (4). Every gradient is pre-tuned with its colors and angle — no sliders to fiddle with before you can export.

Eight saturated multi-color gradients: Sunset (orange to yellow), Ocean Blue (teal to cyan), Purple Haze (purple to pink), Instagram (purple → red → orange, three-color), Candy (pink to orange), Emerald (deep teal to green), Flame (red to orange), and Cotton Candy (pink → orange → green, three-color). Best for marketing visuals and launch graphics where you want the image to stand out in a feed.

Five calmer blue-green tones: Northern Lights, Cool Sky, Frost, Mint, and Aqua Splash. These work well behind product screenshots, technical diagrams, and B2B announcements where you want the image to feel serious rather than flashy.

Five moody low-light gradients: Midnight, Dark Ocean, Dark Purple, Space, and Galaxy. These are the go-to pick behind code snippets, dark-themed UI screenshots, and dashboard mockups — the dark backdrop keeps the screenshot as the focal point instead of competing with a bright canvas.

Four low-saturation pastel gradients: Soft Pink, Lavender, Morning Sky, and Dreamy. These are the quietest option — the background adds color without fighting for attention, which is often what you want behind a product screenshot in a slide deck or doc.

Under the hood it's standard CSS linear-gradient syntax: linear-gradient(angle, color stops…). Each preset provides the colors and angle; color stops are distributed evenly across the gradient. That means the rendered output is identical to what you'd get from hand-writing the gradient, so it scales cleanly at any canvas size.

Yes. The Background panel has tabs for Solid, Gradient, and Image. Solid ships with a custom color picker plus 16 preset swatches (white, slate 50/100/200/800/900, black, red, orange, yellow, green, teal, blue, indigo, violet, pink). There's also a transparent option for PNG exports with no background at all. Gradients are one of the three choices, not the only one.

Online generators typically give you raw CSS you then have to paste somewhere — they don't actually render a finished image. Diwadi applies the gradient to a canvas and exports a real PNG you can drop into a landing page, slide deck, or social post. It also runs fully offline, so the gradients are available on a plane, on a locked-down network, or when you simply don't want to upload your screenshot to a third party.