Sick Gradients

Last Updated on August 20, 2026 by Editorial Team

Using these Sick gradients will surely put every web and other graphic design projects on fire!

Compiled and shared by Alexandr Demidov for free in a single Sketch file.

Fifteen swatches, each one a two-stop gradient, laid out in a simple three-column grid with the hex codes printed right under every tile. That labeling is what makes this Sketch file genuinely useful rather than just pretty to look at: you can read off both endpoint colors at a glance and rebuild any of them in whatever tool you are working in.

The palette leans hard into the vibrant, candy-saturated end of the spectrum. There are hot magentas sliding into violet, sky blues bleeding into periwinkle, a teal-to-mint pair, sunny oranges and golds, and a run of berry and rose tones that finish on a deep wine red.

Nothing here is muted or desaturated. Every combination is built for energy and visual pop rather than subtlety.

That character makes this gradient pack a natural fit for anywhere a design needs to feel current, youthful, or a little bit loud. Think app icons, onboarding screens, hero sections on landing pages, event posters, music or nightlife branding, and social media graphics that need to stop a scroll.

The blue-to-purple and teal-to-green combinations in particular echo the kind of gradients that became a shorthand for tech and SaaS branding a few years back, so they still read as clean and modern when used on buttons, badges, or feature icons.

The pink and orange sets, on the other hand, feel more suited to lifestyle, fashion, or creative-agency work where warmth and playfulness matter more than restraint.

Working the Gradients Into Your Own Files

Because each swatch is just two hex values, applying them anywhere is straightforward.

Grab the two codes from under a tile, create a linear or radial gradient fill in your editor of choice, and set those as your start and end colors.

Most of the pairs in this set share a similar hue and saturation logic, so before pulling the whole thing into a project it helps to test the angle: a diagonal 45-degree direction tends to suit the punchier combinations like the magenta-purple or orange-red pairs, while a straight vertical gradient reads calmer and works better behind text or on backgrounds.

If you want more range, try shortening the gradient stop distance to intensify the contrast, or stretch it out over a larger shape to get a softer, more atmospheric blend.

These gradients also layer well with white or black overlays at low opacity, which is a quick way to tone one down if it feels too intense for body backgrounds or large surfaces.

When pairing them with other elements, keep supporting graphics simple. Flat white or black typography, thin-line icons, and minimal UI elements all sit well on top of these gradients because the color itself is already doing the visual work.

If you are building a full palette for a brand or app, pick one or two gradients from the set as accents rather than using several at once, since the saturation level here is high enough that multiple loud gradients on the same screen can compete with each other.