Gradient Heading — every design
Palettes, custom colours and stops, linear / radial / conic gradients, solid and image fills, marked words, flowing / shine / hue animations, smooth hover colours, shadows, outlines, blend modes and finished designs.
1. Palettes
Thirteen ready-made palettes — pick one and you are done. “Custom colours” unlocks the colour pickers.
Indigo → Pink
Palette: Indigo → Pink
Sunset
Palette: Sunset
Ocean
Palette: Ocean
Aurora (3 colours)
Palette: Aurora (3 colours)
Candy
Palette: Candy
Gold (3 colours)
Palette: Gold (3 colours)
Fire
Palette: Fire
Neon
Palette: Neon
Forest
Palette: Forest
Midnight
Palette: Midnight
Peach
Palette: Peach
Graphite
Palette: Graphite
Rainbow
Palette: Rainbow
2. Custom colours and stops
Two colours or three, each with its own location, and any angle.
Two colours
First + second colour, 90°
Three colours
Middle colour switched on
Hard stop
Both locations at 50% — a sharp split
Top to bottom
Angle 180°
Diagonal
Angle 135°
Late blend
First colour holds until 55%
3. Gradient types
Linear, radial or conic. Radial and conic take a centre; conic also takes a starting angle.
Linear
Linear, 90°
Radial glow
Radial from the centre
Radial corner
Radial from the top left
Conic
Conic, from 90°
Conic prism
Conic with the rainbow palette
Conic offset
Conic centred bottom right
4. Solid colour and image fills
A plain colour (it still takes the hover colour and animations), or a photo showing through the letters.
Solid colour
Fill type: solid
PATTERN
Image, custom zoom 520%
DIVI ENGINE
Image, zoom 700%
MINT
Image, cover (whole photo)
5. Marked words
Wrap words in {curly braces} and only those take the fill. The rest keeps its own colour — and the marked words can have their own font and a gradient underline.
Launch your store this week
“Launch your store {this week}”
Built for makers,
loved by teams
Two marks, a line break
Write less, ship more
Marked words in italic serif
Plans that grow with you
Gradient underline, 6 px
6. Animations
Flow slides a linear gradient, spins a conic one, breathes a radial one and pans an image. Shine sweeps a highlight; colour cycle rotates the hue.
Flowing gradient
Flow, linear, 6 s
Spinning conic
Flow, conic, 4 s
Breathing radial
Flow, radial
PANNING
Flow, image pans
Shine sweep
Shine, 3.5 s
Colour cycle
Hue rotation, 8 s
Reversed flow
Flow, reversed, 3 s
Rainbow road
Rainbow palette flowing
7. Hover
Hover each title. Colours and the angle animate smoothly between states.
Shift on hover
Hover effect: shift
Glow on hover
Hover effect: glow
Lift on hover
Hover effect: lift
Colours change
Hover colours, 700 ms
Angle turns
Hover angle 0° → 180°
Solid to accent
Solid fill, hover colour
8. Shadow, outline and blend
The shadow is a drop shadow behind the letters, so it never muddies the gradient. Outline strokes the glyphs; blend mode mixes with what is underneath.
Soft shadow
Shadow, 0 / 8 / 16
Hard offset
Shadow, 4 / 4 / 0
Outlined
Outline 1.5 px
BLEND
Blend: multiply over a tint
SCREEN
Blend: screen on dark
DIFFERENCE
Blend: difference
9. Layout, tags and links
Alignment per device, a maximum width with its own position, any HTML tag, and a link.
Aligned left
Alignment: left
Centred
Alignment: centre
Aligned right
Alignment: right
A narrow headline that wraps over several lines neatly
Max width 14ch, centred
A linked H4 (Tab to see the focus ring)
Paragraph tag
HTML tag: p
10. Finished designs
Real layouts: a dark launch hero, a SaaS headline with an underline, an event poster, an editorial feature and gradient numbers.
New · Version 4
The fastest way to
build a brand online
Pages, checkout and email in one place. Launch this afternoon.
Grow revenue with less effort
Automations that follow up, upsell and win back customers while you sleep.
SUMMER
SOUND
FEST
AUG 14 — 16 · LISBON
Feature · 8 min read
The quiet return of handmade things
Why a generation raised on screens is learning to throw pots, bind books and bake bread.
98%
on-time delivery
4.9★
average rating
12k
happy stores