.css.svg.png.jpeg
7000+ gradients free for
for personal and commercial use.
Free gradient backgrounds for personal and commercial use. Copy CSS or download SVG, PNG and JPEG. No sign-up. No download limits.
All gradients
A little of every style. Find the colours for your next idea.
See your gradient.
In a real layout.
Try colours on landing pages, cards and footers. Find your perfect fit.
Soft auras
Soft organic colour forms, delicate blur and fine grain. Three distinct compositions with coordinated colour variations.
Light atmospheres
Grainy light washes and glowing reflected horizons. Atmospheric gradients in coordinated colour palettes.
Landing page
Soft horizons and a little glow. Made for your first impression.
Footer glow
Deep shadows, rising light and soft grain. A memorable finish.
Colour clouds
Bright colour clouds, soft blurred folds and a touch of grain. Playful backgrounds for light and dark designs.
Fluid fields
Flowing colour seams, soft folds and organic currents. Sculpted blends in eight colourways.
Prismatic light
Stepped light, luminous glass strips and refracted colour. Geometric rhythm with a soft finish.
No gradients for this mode yet. Try another design background.
All collections
Explore every style. Find a collection for your next idea.
A little colour.
A lot of possibilities.
Three simple steps. Your next background is ready.
01Find your gradient.
Explore the collections or browse all gradients. Choose a style that fits your next idea.
02Pick your colours.
Open a gradient and choose a colour variation. Find the right match for your light or dark design.
03Add a class. Swap the look.
Add the stylesheet once. Use fg-gradient with your chosen gradient class, then change the class to switch colours.
One template. One small link.
Load only the template you need. Change its class to swap colours.
<link rel="stylesheet" href="/gradients/styles/aurora.css">2. Add to your HTML
<section class="fg-gradient fg-aurora-01">
Your next idea
</section>Keep fg-gradient. Swap fg-aurora-01 for fg-aurora-04 or another colour class from this template.
Made for your next idea.
A place for the people behind the projects.
A soft backdrop for a bold idea. This is the kind of colour I would use behind a portfolio hero.
UI designer
Portfolio design
Pick a palette, preview the layout and bring the background into a project. A simple workflow makes all the difference.
Frontend developer
Website backgrounds
Subtle grain and a little glow can give a presentation cover so much character.
Brand designer
Presentation design
The small details matter: a quiet space for the headline, a little light around the product and colours that sit well together.
Product designer
Landing pages
One composition, a different palette, a whole new mood. That is a lovely starting point for exploring a visual direction.
Creative developer
Colour exploration
A background should make room for the content. Soft blends are a useful place to start.
Web designer
Interface design
A little colour goes a long way when the rest of the layout is kept simple.
Independent designer
Creative projects
Previewing the same background on a card and a full page helps me imagine where it belongs.
Design engineer
Layout exploration
From a wide cover to a portrait graphic, it is useful to see how a composition changes with the crop.
Visual designer
Social graphics
Share a little feedback.
Frequently asked questions.
A little help with your next background.
Where can I download free gradient backgrounds without signing up?
FreeeGradients is a free gradient library by Arclink Edge. Browse a collection, open a gradient and choose Export. Download PNG, JPG, SVG or WebP, or copy CSS, without an account or download limits.
Can I use the gradients in commercial projects?
Yes. FreeeGradients backgrounds are free for personal and commercial use, including websites, apps, presentations and client projects.
How do I add a gradient background to my website?
Use a gallery card’s CSS button, or open Export on a details page and select CSS. Copy the complete CSS rule into your stylesheet and apply its generated class to an element with height or padding. Native gradients use CSS directly; textured designs reference an optimized image. Alternatively, copy the stylesheet link into your HTML head and add the supplied classes to your element.
Which gradient format should I download?
Use CSS for website backgrounds, PNG for lossless raster images, JPG for broad image compatibility, and WebP for compressed web images. SVG is a scalable container, but some detailed designs include raster artwork, so their source resolution still matters. HTML, React and JSON exports are also available.
Can I download a 4K gradient or a custom image size?
Yes. Open Export and choose 4K for 3840 × 2160 pixels. Other presets include Full HD, square, Instagram post, story and phone. Custom dimensions accept 64 to 4096 pixels per side. Exports use a centred crop; enlarging raster-based artwork does not create extra source detail.
What is the difference between smooth, mesh and grain gradients?
Smooth gradients blend colours along a direction or around a centre. Mesh-style gradients combine several overlapping colour areas. Grain gradients add texture. FreeeGradients has separate collections for these styles, plus glow, pastel, sunset, holographic and other backgrounds.
Are there gradients for both light and dark mode?
Yes. Use the For light and For dark filters on the All gradients or collection pages, then choose a colour variation. These labels describe the intended design background; check text contrast in your final layout.
Can I change the colours of a gradient?
Choose one of the supplied colour variations on the gradient details page. Native gradient CSS can also be edited in your own stylesheet. Detailed SVG downloads can contain embedded images or filters, so they do not all support the same colour editing workflow.
Can I use the gradients in Figma, Canva or presentations?
Export a PNG or JPG and import it as an image into your design or presentation tool. Choose dimensions that match your frame or slide. This uses the exported artwork; it does not turn the background into editable native gradient stops.
How do I use a gradient in React or Tailwind CSS?
Open Export and select React for a JSX component, or use Copy CSS with a regular CSS class in your React app. In a Tailwind project, keep the supplied background in a CSS class and use utility classes for spacing and layout.
How do I switch gradients with a CSS class?
Copy a template stylesheet link from its details page into your HTML head. Add fg-gradient and the selected colour class to an element. Switch to another colour class from that same template to change variations. A different template needs its own stylesheet. Textured backgrounds load their selected image automatically.