The short version
- Canva's colour panel offers gradient presets and a custom gradient option that can fill a page background or many shapes.
- A custom Canva gradient lets you set its colours by hex code and choose a linear direction or a radial style.
- A gradient shape with lowered transparency over a photo is the simplest way to make a gradient overlay in Canva.
- Canva gradients are flat colour blends, so grain, texture and soft light have to be added with separate elements.
- Gradient presets and library elements are shared by every Canva user, which makes them convenient but not distinctive.
On this page
To make a Canva gradient, select the page background or a shape, open the colour panel, and either pick one of the gradient presets or add a new colour and switch it to a gradient. You can type exact hex codes for each colour and choose a straight direction or a radial style. That covers most quick backgrounds well. Where it stops is texture, light and exclusivity: a gradient fill is a flat blend that every user can make, so a look that needs to feel like yours takes more than the fill.
Canva updates its editor often, so menu names may shift slightly. The steps below describe the general route, which has stayed consistent.
How to make a custom gradient in Canva
- 1
Select what to fill
Click an empty part of the page to select the background, or click a shape from Elements. Photos take a different route, covered below.
- 2
Open the colour panel
Click the colour tile in the toolbar at the top. The gradient presets sit with the default colours.
- 3
Create your own
Add a new colour, then switch from solid to gradient. Click each colour in the gradient and paste a hex code rather than dragging around the picker.
- 4
Choose the style
Pick a linear direction for a sweep across the design, or radial for a pool of colour that fades outwards. A radial centre suits a product or a single word.
- 5
Reuse it
Once applied, the gradient usually appears among the document's colours, so you can apply it to other pages and shapes without rebuilding it.
Gradient colour codes to paste into Canva
The quickest way to a better gradient is better colour codes. Pairs that sit close on the colour wheel blend cleanly; opposite colours turn grey in the middle, the problem described in muddy gradients. Each pair below uses two related colours with a clear difference in lightness, which gives depth without mud.
Gradients on photos and as overlays
To tint a photo, add a square from Elements over it, stretch it to cover the image, give it a gradient fill, then lower its transparency so the photo shows through. A gradient that runs from a dark colour at the bottom to fully clear at the top is the classic way to make room for a headline over a busy picture. For a stronger colour treatment, Canva's photo editing includes a duotone effect, which maps the picture's tones to two colours; the duotone effect explains when it works.
Route in Canva
Watch out for
Route in Canva
Watch out for
Route in Canva
Watch out for
Route in Canva
Watch out for
Route in Canva
Watch out for
Where Canva gradients stop
None of these limits make Canva a poor tool. They come from what a gradient fill is: a smooth, flat blend between colours you pick. Canva's strength is breadth, covering slides, documents, video and print in one place, and for a quick social graphic its gradients are entirely adequate.
What a Canva gradient does well
- A clean background in a couple of clicks
- Exact colours by hex code
- Linear and radial styles
- Easy reuse across one document
- Shapes and overlays on photos
What it leaves to you
- Grain, paper or sheen on the surface
- Light that comes from somewhere
- Keeping words readable where colour gets bright
- Placing the light again for each new size
- A look no other account can use
Texture you can fake with a grain image laid on top at low transparency; grainy gradients describes the effect you are aiming for. Legibility you manage by hand, moving the text or the bright area until they stop fighting. The last point is the hardest. Presets and library graphics are, by design, available to everyone, which is part of why every feed looks the same.
When a Mark helps
A Gradiently Mark is a finished gradient and material background: colours, up to three stacked materials, light, grain and motion, with exactly one owner at a time. Anyone can design with a Mark nobody has claimed, for free. Two differences matter for the gaps above. The Mark knows where the words are, so its calmest area moves behind your text and Auto ink picks light or dark type per line. And claiming it means only you can export with it, so the look people come to recognise stays yours.
With the response off, the brightest colour can land behind the headline, as it does with any flat gradient.
With it on, the Mark settles behind the words and the ink adapts, with no box or shadow added.
You can happily use both: Canva for documents and decks, Gradiently for the signature backgrounds. The full comparison is in Gradiently vs Canva.
Questions people ask
How do I make a gradient background in Canva?
Click the page background, open the colour panel and choose a gradient preset, or add a new colour and switch it to a gradient with your own hex codes.
Can I use my own colours for a Canva gradient?
Yes. In a custom gradient you can set each colour by pasting its hex code.
How do I put a gradient over a photo in Canva?
Place a shape over the photo, give it a gradient fill and lower its transparency so the picture shows through.
Can I add grain to a Canva gradient?
Not in the fill itself. Lay a grain or noise texture image over the gradient and lower its transparency.
What colours make a good gradient in Canva?
Two related colours with a clear difference in lightness, such as indigo #1e1b4b to violet #8b5cf6, blend cleanly without going grey.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile