Style library
Every colour style, explained
Twelve looks, one renderer. Each style is a combination of a gradient fill, an optional stroke, a glow and a drop shadow that is painted at your export resolution.
Choosing a style is a design decision, not just a colour preference. A thin pastel gradient disappears on a bright photo, while a heavy chrome bevel can look muddy at 64 pixels. The gallery below lists what each style is actually good at, so you can pick the one that survives the place you are going to publish it.
Rainbow
Best for playful names, birthday graphics and anything that needs to look loud on a small avatar.
Sunset
Warm gradient that reads well on photos of skies, beaches and travel content.
Ocean
Cool blue-green sweep for tech, gaming and calm brand palettes.
Gold
Metallic banding with a dark bevel; popular for giveaways and “premium” titles.
Candy
Pink bubble-gum look wrapped in white — the safest choice for stickers on dark photos.
Neon
Tube-light glow for dark thumbnails, stream overlays and night photography.
Fire
Molten orange with a hot bloom; strong on black backgrounds and action clips.
Ice
White-to-blue gradient that stays readable on busy backgrounds.
Galaxy
Violet to magenta with a purple glow for space and music artwork.
Chrome
Brushed silver contrast bands, ideal for racing, gym and automotive designs.
Holographic
Pastel iridescent foil for beauty, lifestyle and “Y2K” aesthetics.
Outline
Hollow letters drawn only with a gradient edge — perfect over photos and videos.
Gradient or solid? A short rule of thumb
Gradients add depth but they also add detail. If the image will be shown at under 120 pixels wide — an avatar, a chat icon, a small sticker — a two-colour gradient survives much better than a five-colour rainbow. The rainbow style is designed for headline sizes above 300 pixels; at thumbnail size the yellow and green bands start to blur together.
Solid fills with a strong stroke, on the other hand, stay legible at any size. That is why the Candy and Ice styles use a white or dark outline: the outline does the work of separating the letters from the background, so the fill can be as soft as you like.
Matching a background
- Transparent — use it when you will place the image over a photo or a video. Combined with the Outline or Candy style it behaves like a sticker.
- Dark (#0c0c12) — the default because glow and neon effects need a dark surface to bloom against. This is the safest choice for thumbnails.
- White — keep the style dark (galaxy, chrome, ocean) or increase the stroke; pale gradients such as holographic mostly vanish on white.
- Custom colour — enter a brand hex code. A mid-saturation tone gives the best contrast against both light and dark gradients.
Which fonts pair with which styles
Heavy geometric typefaces (Archivo Black, Anton, Bungee) hold a gradient with lots of colour stops because the letters are thick enough to show the transition. High-contrast serifs (DM Serif Display) look best with two-stop gradients and a thin stroke — a five-stop rainbow tends to hide the thin parts of the letterform. Script faces (Pacifico) need a generous stroke and a shadow, otherwise thin joins break up when the image is scaled down.
Combining styles with canvas sizes
| Canvas | Pixels | Recommended styles |
|---|---|---|
| Auto | cropped to the text | Outline, Candy, Gold — for stickers and overlays |
| Square | 1080 × 1080 | Rainbow, Neon, Galaxy — Instagram feed and profile art |
| Post | 1080 × 1350 | Sunset, Holo — portrait feed images |
| Story | 1080 × 1920 | Fire, Ice, Chrome — full-screen stories and reels |
| Wide | 1200 × 630 | Ocean, Chrome — link previews and YouTube thumbnails |
One style per word. Mixing three gradients in a single line usually reads as noise. Pick one style for the headline and keep the rest of the design quiet.