Set the scene for your next post
Start with a 1080 × 1080 post or a 1080 × 1920 story. Pick colors that feel like you, download your background, then add photos and text in your usual editor.
Gradient Background Generator with PNG Downloads and CSS
Blend your favorite colors into a smooth gradient and download it in seconds.
Free to use. No signup or watermark.1920 × 1080px
Made on your devicePreview fits; export is full size
Custom gradient backgrounds for websites and presentations
Create a smooth color transition for a website, presentation, or wallpaper. Start with the soft indigo and violet palette, then choose your own colors and gradient settings. Custom dimensions let you prepare a background that fits your design without resizing a screenshot or cropping a stock image. For a website gradient background, compare a downloaded PNG with the Copy CSS option; CSS scales with the element, while a file has fixed pixel dimensions.
Ways to use the gradient image
Create gradient hero backgrounds for a website.
Make a smooth backdrop for a presentation title.
Design custom desktop and phone wallpapers.
How to create gradient PNG backgrounds or copy CSS
The best starting point is the space you need to fill: a narrow website banner, a presentation slide, or a portrait background.
Choose linear, radial or conic gradient direction
Start with two colors and a linear gradient. Adjust the angle to move the transition across the canvas, then decide whether a third color adds anything useful. Radial gradients concentrate the transition around the center; conic gradients rotate colors around it.
Use an image or reuse the color recipe
PNG is a practical choice when another app needs a background file. For a website, Copy CSS provides a gradient declaration you can apply to an element. Its appearance also depends on that element's dimensions. Conic SVG export approximates the gradient with vector sectors.
Inspect the area behind your text
A gradient can pass behind both light and dark text areas. Check the colors where the letters actually sit, rather than assuming one sample represents the whole background. If a download shows visible color bands, compare another format and view it at its intended size before changing the palette.
Need help choosing a file? Read the image format guide or compare common pixel dimensions.
Popular gradient image sizes
Choose a starting point. Every size is fully customizable.
Gradient Image: questions & answers
Everything you need before your next download.
Can I download a gradient as an image?
Yes. Select the dimensions and export format, then download the generated gradient. PNG is useful when you want lossless image output.
What size should I choose for a 4K gradient?
Use 3840 × 2160 pixels for a landscape 4K UHD background. You can swap those dimensions for a portrait canvas.
Start your next creation with a simple image
Set the mood for a social post, refresh your wallpaper, or give a presentation a clean opening. Pick a canvas and make it yours.
Put your favorite colors on your screen
A soft sunset gradient or a quiet wash of color can make a screen feel like yours. Choose a 4K desktop canvas or a portrait phone size, then build a wallpaper around your own palette.
Give your next presentation a clean opening
Leave room for your ideas with a white canvas, or set the tone with a simple gradient. Start at 1920 × 1080, then add your title in a slide app or use the background for a project cover.