Live preview Navigation
#gradient CSS effects
5,189 free, pure-CSS effects match the "gradient" tag. Each is copy-ready and needs no library or build step.
Effects tagged #gradient
Live preview Navigation
Live preview Navigation
Stamp Ink Rotate Nav
Active link shows a rotated ink stamp badge with skewed impression.
Live preview Navigation
Stamp Paper Fold Nav
Paper sheet nav with folded corner revealing the active item underneath.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Text Gradient Shift Link Navbar
Hovered links shift a gradient text fill smoothly across the letters.
Live preview Navigation
Text Rainbow Flow Navbar
Active link text flows through a rainbow gradient animation.
Live preview Navigation
Vertical Tab Fill Bg
Vertical tabs with a sliding colored fill background on hover.
Live preview Navigation
Vertical Tab Pill Morph
Vertical tabs where the active pill morphs smoothly between items.
Live preview Navigation
Vertical Tab Progress Bar
Vertical tabs with an active progress bar fill on the active item.
Live preview Navigation
Circle Mask Wipe Nav
Active indicator revealed by a circle that expands outward from the link.
Live preview Navigation
Wipe Right Reveal Nav
Active tab revealed by a rightward wipe sweeping across the nav bar.
Live preview Progress
Aurora Queue Progress
An upload queue where three files each carry their own track, ratio and percentage read out.
Live preview Progress
Basalt Cells Progress
Twelve separate basalt cells act as one bar; eight of them are lit for the current value.
Live preview Progress
Canyon Quota Progress
A storage quota bar that prints used against total and drops two threshold markers on the track.
Live preview Progress
Cove Status Progress
The status line and the bar share one timeline, so the label flips to complete as the fill lands.
Live preview Progress
Delta Poll Progress
Poll rows where the vote share is painted behind the option name instead of on a separate track.
Live preview Progress
Ember Health Progress
A skewed game health bar whose colour is read off a fixed red to lime ramp and split by notches.
Live preview Progress
Fjord Rating Progress
A review breakdown that stacks five bars from five stars down to one under an average score.
Live preview Progress
Forge Conveyor Progress
Crates ride a treading belt and drop into a bin that is already filled to two thirds.
Live preview Progress
Frost Bar Progress
A flat frosted bar with a label row and a soft cyan glow on the filled span.
Live preview Progress
Garnet Native Progress
The real progress element restyled with separate WebKit and Gecko pseudo element rules.
Live preview Progress
Gilt Arc Progress
An art deco crown of five nested arches where the three gilded bands mark the reached value.
Live preview Progress
Ivory Slide Progress
An indeterminate bar: a soft ivory shuttle keeps running across the track with no fixed value.
Live preview Progress
Jade Column Progress
Five vertical jade columns fill from the bottom, each carrying its own label underneath.
Live preview Progress
Lattice Fuel Progress
A fuel gauge with a blinking droplet icon, empty and full end marks and a low reserve fill.
Live preview Progress
Meadow Thermo Progress
A thermometer with a bulb, a graduated scale column and a mercury level parked at sixty eight percent.
Live preview Progress
Mica Grid Progress
Progress drawn as a grid of small mica tiles where fifteen of twenty four blocks are filled.
Live preview Progress
Monsoon XP Progress
A level badge sits beside an experience bar that is divided into ten notched tenths.
Live preview Progress
Mosaic Orbit Progress
A hexagonal cell fills from its base instead of a circle while a small hex satellite orbits it.
Live preview Progress
Ochre Wander Progress
Sand runs out of a funnel in a thin stream and the grains wander down onto a growing heap.
Live preview Progress
Pearl Cell Progress
A battery shaped indicator with a moulded cap and a pearl fill sitting at seventy eight percent.
Live preview Progress
Prairie Usage Progress
A plan usage meter with banded tiers and a bubble pointer that hangs over the current value.
Live preview Progress
Ratchet Segments Progress
Seven chamfered LED segments climb a green to red ramp with five of them currently driven.
Live preview Progress
Ruby Drop Progress
A download row with a bobbing arrow glyph, a transferred size read out and a ruby fill.
Live preview Progress
Savanna Target Progress
A bullet style comparison where the reached bar runs under a raised marker showing the target.
Live preview Progress
Shaft Fraction Progress
Progress printed as a plain fraction over twelve slats, seven of which are already driven.
Live preview Progress
Slate Block Progress
A chunky inset slab where the percentage is printed inside the filled block itself.
Live preview Progress
Spindle Signal Progress
Four rising strength bars where three are lit and the leading one keeps breathing on the edge.
Live preview Progress
Summit Numeral Progress
The value is the interface: an oversized clipped gradient numeral over a rule that matches its share.
Live preview Progress
Tide Tube Progress
A vertical glass tube holds a liquid level at fifty five percent while bubbles rise through it.
Live preview Progress
Topaz Skills Progress
A three row skill list where each label sits above its own topaz coloured meter.
Live preview Progress
Tundra Glass Progress
An hourglass built from two clipped triangles where the upper chamber drains as the lower one packs.
Live preview Progress
Turbine Charge Progress
An upright cell whose electrolyte keeps climbing behind a bolt glyph while it charges.
Live preview Progress
Velour Lull Progress
A neumorphic groove pressed into a soft slab, holding a raised pill and a slowly breathing marker.
Live preview Progress
Vitrine Glide Progress
A frosted glass panel floating over coloured light, with a specular streak gliding across it.
Live preview Sliders
Brass Groove Slider
A deep machined groove holds a polished brass bead between end caps.
Live preview Sliders
Dune Curve Slider
Layered shading bows a perfectly flat rail into what reads as a rounded dune crest.
Live preview Sliders
Fjord Zoom Control
A zoom rail flanked by minus and plus glyphs drawn purely from background bars.
Live preview Sliders
Lapis Brightness Slider
A brightness rail brightening from night blue to daylight between two markers.
Live preview Sliders
Prairie Zone Slider
The rail is banded into low, mid and high zones with a matching legend underneath.
Live preview Sliders
Ruby Heat Slider
A thermostat rail shifting from cold cyan to ruby heat with a scale beneath.
Live preview Tabs
Amber Segment Control
An iOS style segmented control with a springy amber thumb and scaling panels.
Live preview Tabs
Arc Vapor Tabs
A vaporwave grid horizon where the underline swings along a shallow arc, not a line.
Live preview Tabs
Basalt Icon Tabs
Icon only tabs cut from dark basalt with an ember bar riding the top edge.
Live preview Tabs
Bearing Difficulty Tabs
Difficulty tabs counted in bearing balls that seat themselves when chosen.
Live preview Tabs
Delta Language Tabs
A language picker whose two letter code chip fills in as the greeting swaps below.
Live preview Tabs
Dune Right Aligned Tabs
Tabs pushed to the right of a titled bar, marked by a widening sand coloured rule.
Live preview Tabs
Dynamo Tracking Tabs
The active label spreads its letters apart while a charge line sweeps beneath it.
Live preview Tabs
Fjord Billing Period Tabs
A billing period switch with a sliding thumb, a saving badge and a swapping price.
Live preview Tabs
Girder Report Type Tabs
Report tabs sitting on a truss whose zigzag shifts under the active span.
Live preview Tabs
Gleam Lacquer Tabs
Deep lacquered plates where a narrow specular highlight sweeps over the open tab.
Live preview Tabs
Glide Glass Tabs
A frosted glass pane stretches as it glides between the labels of the bar.
Live preview Tabs
Granite Gradient Tabs
The active tab fills with a granite gradient while the panel rail slides sideways.
Live preview Tabs
Halo Mist Tabs
A soft aura swells out of the chosen tab while the panel resolves out of a haze.
Live preview Tabs
Hush Noir Tabs
Venetian blind shadows across a dark room, with one spotlight moving between the tabs.
Live preview Tabs
Ivory Progress Tabs
An ivory progress line under the panel grows as later tabs are selected.
Live preview Tabs
Kindle Riso Print Tabs
Two risograph ink layers start out of register and snap together on the chosen tab.
Live preview Tabs
Meadow Thumbnail Tabs
Gallery thumbnails act as tabs and the full frame above cross fades with its caption.
Live preview Tabs
Mesa Right Side Tabs
The tab column sits on the right and a stone coloured rail rides down beside it.
Live preview Tabs
Opal Thick Underline
A thick underline drifts between tabs while its opal gradient keeps shifting.
Live preview Tabs
Quartz Vertical Tabs
A vertical tab column with a violet rail that travels along the right edge.
Live preview Tabs
Quiver Mosaic Tabs
Stained glass tabs over dark grout whose panel tiles light up one after another.
Live preview Tabs
Ratchet Account Type Tabs
A pawl steps across a toothed rack to pick between two account types.
Live preview Tabs
Reef Centered Pill Tabs
Centred pill tabs on an open bar; the active pill keeps breathing in coral light.
Live preview Tabs
Rivet Auth Form Tabs
Riveted plates switch between a sign in and a sign up form with real fields.
Live preview Tabs
Spindle Code Preview Tabs
A preview and code pair whose spindle keeps turning on whichever side is open.
Live preview Tabs
Tether Divider Tabs
Hairline dividers split the tabs and a tether drops from the active one to the panel.
Live preview Tabs
Verge Page Turn Tabs
Cream book leaves bound at the spine; each panel turns over from the left edge.
Live preview Tabs
Wander Bauhaus Tabs
Primary shapes on a striped ground; the ground itself shifts instead of an indicator.