Gradients

Gradients that shift from one tone to the next: mesh and grainy color in interfaces, type and brands.

A gradient blends one colour into another across a surface, and done well it gives a flat screen light, depth and atmosphere. In interfaces it often signals that something is alive, such as a voice assistant listening or content loading; in type and motion it becomes the subject itself. This page gathers gradients in app interfaces, kinetic type, brand systems and 3D, much of it made in Cavalry, by designers and studios such as Yonsan Kim, FIELD.IO and COLLINS.

58 works by 40 creators, newest added 11 November 2026. Each is credited to the people who made it and links to the original.

All 58 Gradients

Indigo Ribbon by Sasha Birukoff — An abstract motion study of a ribbon of indigo light combed into fine strands, bending from an arch into a hook and a wave over thirty seconds, smeared like a long exposure.
Gradient Logos by Katya N. — A selection of gradient logos and app icon marks in white on black, a tulip, a split circle, stacked squares and a looping ring, where grainy shading gives flat geometry its depth.
Infinite Garden Brand System by Little Plains — An agentic brand system for Infinite Garden, an AI research lab rebuilding how consumer companies are made, grown from one dot whose lines expand as market signals become products.
Everpure Motion Campaign by ILLO — A brand motion campaign for Everpure made with Bloomberg Media Studios, in which stacked isometric slabs light up along their edges until one tips open onto a pixelated landscape.
Everpure Banknote by ILLO — A 2D brand animation from the Everpure campaign made with Bloomberg Media Studios, where cursor arrows assemble a banknote from slices of pastel colour, then let it melt into pixels.
Thermal Type Posters by Josh Puckett — A work-in-progress series of typographic posters, each pairing a friendly phrase with one giant letter rendered like a heat map, signed The California Interface & Trade Company.
Tessel Brand Design by Sam Hox — Brand design for Tessel, a cell banking company storing young cells for future therapies, where 3D cells pack together with no gaps, an identity built on tessellation.
AI Day Planner by Noman Ijaz — A mobile UI prototype of an AI day planner that turns a sheet of suggested tasks into a scheduled day in one sweep of colour, with an Undo plan button to take it all back.
IBM Financial Intelligence Garden by FIELD.IO — An interactive experience for IBM's Financial Intelligence, where the circle of a coin grows into flowers and foliage in a garden that responds, so people learn about finance through play.
Scheduled Task by Szymon Pawlik — The breakdown of a SaaS launch film for Scheduled Task, where a Morning brief card rewrites its serif summary each day, its 1,400-plus layers laid open with the guides showing.
Mascot App Icons by Katya N. — Mascot app icons that turn an app into a brand, one rounded icon becoming a new 3D character at each touch of the cursor, from a pink flame with eyes to a grinning >_< terminal.
glimm Spreadsheet Transition by Noman Ijaz — A shader transition from glimm, the React and Next.js library, where a single WebGL band of blurred light sweeps up an empty spreadsheet and leaves it filled with AI-generated deals.
Nav Experiment 2.0 by Abhishek Bariya — A mobile navigation experiment where a round corner button fans out its menu along the curve of the phone screen, then folds back into the chosen icon and retints the screen.
Vaultline Hero Cards by Batuhan Kara — Landing page cards for Vaultline, a data security platform that finds sensitive data and governs who sees it, where word pills pile up under physics and get knocked about by the cursor.
X App Icons by Benji Taylor — A refresh of the alternate app icons for X, where the logo is reimagined in thirteen materials, from red Mars soil and moon dust to a starfield, coloured glass and brushed metal.
Dot Matrix Weather App by BThree — A weather app concept for iPhone where picking a city on the edge of the screen recolours the whole interface to match its sky, the day’s forecast redrawn as a dot-matrix chart.
Pattern Generator by Tirth — A generative pattern tool built to make high-quality patterns for a work-in-progress project, growing pixel islands, drifting blobs and meadows out of snippets of noise code.
Remote Product Cubes by COLLINS — Brand motion from the rebrand of Remote, the HR software company recast as worldwide payroll infrastructure, where blurred cubes regroup into a new figure for each payroll service.
Remote Brand Motion by COLLINS — Brand motion for the rebrand of Remote, the HR software company recast as worldwide payroll infrastructure, with a visual identity built around a cube that extrudes, opens and multiplies.
Pick Your Vibe by Timeless — A mood picker micro-interaction for a places app, a glowing orb on the map that you drag round to Date, Friends, Work or Solo, turning a filter into a gesture that feels like play.
Weekly Vault Welcome Screen by Satya — A 3D onboarding welcome screen for a mobile app where key tags gather into a gold key: show up for the small stuff each day, and on Monday that key opens the vault.
Weather Scrubber by Praneeth Jonnala — A SwiftUI weather app with Metal shaders and haptics, where dragging a time scrubber repaints the whole screen hour by hour, from afternoon sun to rain on the glass and a lightning storm.
AlignCanvas Grainient Mockup by Basit A. Khan — Phone mockup animations for Grainient’s gradient packs, made with AlignCanvas, a browser tool that turns images into 3D motion with nothing to install and no image leaving the device.
Wealth App Interaction by Alex Herasov — A fintech mobile UI interaction for a wealth app, where a grainy gradient mountain acts as the brand image, shrinking into the balance card and blurring away when the transfer menu opens.
Vaultline Cards by Batuhan Kara — Landing page feature cards for Vaultline, a data access product that scans warehouses and SaaS apps for copies, each tilting toward the cursor as a scan or an access grid lights up.
ASCII Flame by Raunak Das — An ASCII art flame in monospaced characters, one of two versions put to a vote, where sparse dots lick the edges and dense 0s, 1s and 8s pack its hot core in a looping teal and green.
HyperColour by Yonsan Kim — Kinetic typography made in Cavalry and sold as a remixable file on Scenery, where blue streaks of light rise from the word like an aurora and burn its letters white each time they surge.
Cellular Type Arrows by Yonsan Kim — A Cavalry motion study from a cellular type series, arrows packed with soft Voronoi cells that drift and split while waves of black roll through, an exercise in colour blending.
Cellular Type Numbered Arrow by Yonsan Kim — Kinetic typography in Cavalry from a cellular type series, an arrow filled with numbered Voronoi cells that shift and resize as it moves from pale blue to navy to glowing white.
Cellular Type Circle by Yonsan Kim — A Cavalry colour blending study from a cellular type series, a glass-rimmed circle of numbered Voronoi cells that floods from black and white into orange, sky blue, pink and green.
Cellular Type Orange by Yonsan Kim — A generative type experiment in Cavalry, heavy glyphs fractured into rounded Voronoi cells by a custom JavaScript Deformer, the heat travelling across them from cream to ember red.
Cellular Type A by Yonsan Kim — A cellular type experiment in Cavalry, a letter A fractured into Voronoi cells that light up from the counter outward, so colour seems to grow through the letterform like living tissue.
Brain Fog Alien by Yonsan Kim — A Cavalry motion study in kinetic typography where the word alien, traced in dotted points, fills with sliding gradients and blur, a technique inspired by Fafa Zhu.
Playing with the Sky by Areadne — An interactive 3D sky-drawing tool where any stroke puffs up into a cloud, now given perspective so the clouds cast shadows on the ground as the light turns from night to day.
RAY 3D Print Scraper by Marija Kucurski — A 3D print scraper concept for a Render Weekly prompt, shaped like a stingray to glide beneath prints, with the sculptural, mouse-like surfacing the industrial design studio praised.
Timer Widget by Sasha Birukoff — A timer UI component built on a dot matrix, where a round grid of red dots turns a step with each second beside the digits, a tiny clock whose pattern does the counting.
3:2 by Carsten Gueth — A looping 3D animation study named only for a ratio, 3:2, in which an S-shaped tube of fine rings turns until its open ends face the viewer as flat discs of magenta.
It’s a Squish by Timea Balo — A soft-body animation where a band cinches a stack of discs until they bulge around it, the soft gradients making each simple shape look full, round and good to squeeze.
Igor Logo Exploration by Igor Lelic — An interactive logo exploration built on a first name, where a soft-body mark can be grabbed and stretched like rubber before it snaps back with its letters in a new order.
Book a Liquid Call by Val Guerra — A liquid hover effect for a Book a call button, built on metaballs so the pill bulges toward the cursor like a drop of water, then snaps back with a soft pink and blue glow.
Compass Pendant by Simon Sjöö — A 3D product film rendered in Cinema 4D and Redshift, second in a nine-part outdoor gear series, imagining a compass worn as a pendant, its digital heading turning as it swings.
Layered Cube by Poool Studio — A 3D animation R&D piece in which a plain white cube opens into strata of materials, from stepped red blocks to metallic spheres, as if revealing what a simple form hides inside.
Infinite Scroll by Philip Nordström — A looping 2D animation built on an infinite zoom, in which a girl falls through her phone into the same reel again and again, a wry picture of the scroll that never ends.
Phased Gradient Crosses by Yonsan Kim — A motion study of phased gradients made in Cavalry, where the three crosses of Amsterdam’s emblem pulse through red, black and white, turning a city symbol into light.
Phased Gradient Dates by Yonsan Kim — Kinetic typography made in Cavalry that smears the dates of a week of studio visits in Amsterdam and Rotterdam with phased gradients, the type sharpening and dissolving in turn.
Phased Gradient Amsterdam by Yonsan Kim — Kinetic typography in Cavalry where phased gradients of red and lavender rise from the word Amsterdam and pulse through it, a souvenir of a week visiting the city’s design studios.
Luminance Blur by Antonin Waterkeyn — Kinetic typography made in the Cavalry beta to test its new Luminance Blur effect, a rounded number 2 in GT Maru Mono melting into light and redrawing itself in other weights.
Vases from 2D to 3D by Timea Balo — An animated still life illustration in a 2D to 3D to 2D effect, where flat vase silhouettes fill one by one with glowing gradients and seem to gain volume before turning flat again.
Circuit Identity by Halaska — Brand identity and motion for Circuit, the protocol that powers identity, where the dot grid of the brand becomes a living pattern across posters, rippling, spiralling and swelling.
IBM Quantum Compass by FIELD.IO — A generative motion system for IBM Quantum Compass drawn from quantum states, where forms radiate, converge and align as visitors find their way, tuned live from a panel of sliders.
Pier Rides 10p by Peregrin Studio — A type specimen in motion for Ashcroft, a flared serif after early twentieth-century British lettering, where magpies perch on the words Pier Rides 10p against a seaside sunset.
Chelsea Royal Garden by Peregrin Studio — An animated type specimen for a light weight of Ashcroft, a flared serif rooted in carved and painted British lettering, with petals and a bird drifting through Chelsea Royal Garden 1913.
Nocturnal by Teknosis — A looping 3D animation in Cinema 4D that reduces a flower to colour, repetition and movement, its navy petals glowing red at the heart as pulses of light climb the stem at midnight.
Manta Cushion by Reframe Studio — An unused CGI film scene for Manta, the Fursys task chair by Jehs+Laub, that turns comfort into a surreal soft-body image: the floating chair sinks into a giant quilted cushion.
Voice Effect for SwiftUI by Jakub Antalik — A voice interface effect for SwiftUI that responds to how something is said, not only what: emotion read on device in the tone and the words tints the glow along the screen’s edge.
Giza Crypto Agents by Bakers Studio — A crypto app design for Giza and its AI agents, a calm, almost tactile take on fintech mobile UI where the whole interface is built around one glowing pearly sphere holding the balance.
Offline Footer by Alim Joldaspayev — A website footer for Offline that turns the end of a landing page into a quiet scene about logging off: a vintage Mac on a grassy hill goes dark as day turns into a starry night.
Good Air Weather Timeline by Nihal Singh — A weather app timeline interaction for Good Air 2.0 on iOS, where the hours ahead are scrubbed rather than read: a thumb drags the forecast from blue afternoon into red dusk and night.

Featuring work by

Yonsan Kim, Sasha Birukoff, Katya N., ILLO, Noman Ijaz, FIELD.IO, Batuhan Kara, COLLINS, Timea Balo, Peregrin Studio, Little Plains, Josh Puckett, Sam Hox, Szymon Pawlik, Abhishek Bariya, Benji Taylor, BThree, Tirth, Timeless, Satya, Praneeth Jonnala, Basit A. Khan, Alex Herasov, Raunak Das, Areadne, Marija Kucurski, Carsten Gueth, Igor Lelic, Val Guerra, Simon Sjöö, Poool Studio, Philip Nordström, Antonin Waterkeyn, Halaska, Teknosis, Reframe Studio, Jakub Antalik, Bakers Studio, Alim Joldaspayev, Nihal Singh.

Gradients

All 58 Gradients

Featuring work by

Related topics

Browse by category

Topics