Live preview Sliders
Spiral Mist Slider
Two blurred conic clouds breathe behind the rail and leave a soft aura around the knob.
#conic-gradient CSS effects
32 free, pure-CSS effects match the "conic-gradient" tag. Each is copy-ready and needs no library or build step.
Live preview Tabs
Orbit Neumorphic Tabs
Soft moulded keys press inward and a pale light keeps orbiting the chosen one.
Live preview Accordions
Dynamo Keys Accordion
Shortcut groups list their key caps while a small dynamo wheel keeps turning.
Live preview Accordions
Vault Deco Accordion
A gold framed panel with a deco ray fan that turns half around on selection.
Live preview Avatars
Brass Conic Halo Avatar
A conic brass gradient turns endlessly around a dark initials disc.
Live preview Avatars
Coil Two Tone Conic Frame
A masked conic ring alternates two tones and reverses direction while hovered.
Live preview Avatars
Marble Story Segment Ring
Segmented story arcs rotate around the avatar and freeze while hovered.
Live preview Avatars
Spindle Level Ring Avatar
A conic experience ring wraps the avatar and the level chip glows under it.
Live preview Modals
Dynamo Invite Modal
A team invite panel spins up to full size while a charged halo keeps rotating in the corner.
Live preview Modals
Orbit Feature Modal
A feature announcement travels in along a curved arc while an iridescent sheen keeps orbiting its rim.
Live preview Progress
Circuit Manometer Progress
A round pressure dial with a tick ring, a red danger band and a needle that keeps quivering.
Live preview Progress
Flange Vumeter Progress
An analogue volume unit meter whose needle keeps flicking across a scale into the red end.
Live preview Progress
Flint Orbit Progress
A slim conic ring with the percentage printed at its centre and a slow pulsing halo.
Live preview Progress
Granite Gauge Progress
A half circle gauge built from a conic gradient anchored at the bottom centre of the box.
Live preview Progress
Harbor Dual Progress
Two concentric rings carry two different metrics with a colour matched key column beside them.
Live preview Progress
Marble Ring Progress
A thick conic gradient ring cut out with a mask, holding a static seventy two percent sweep.
Live preview Progress
Mauve Quiver Progress
An organic ring holds the value arc while its outline morphs and breathes on a slow cycle.
Live preview Progress
Neon Halo Progress
A vaporwave ring in magenta and cyan wraps a slatted retro sun that carries the percentage.
Live preview Progress
Obsidian Dash Progress
A dashed ring made by masking a conic gradient with a repeating conic pattern of ticks.
Live preview Progress
Piston Tachometer Progress
A rev counter whose banded arc runs into a red zone while the pointer keeps sweeping the range.
Live preview Progress
Pylon Cogwheel Progress
A toothed wheel turns against a smaller counter rotating one while a ring holds the value.
Live preview Progress
Ridge Rings Progress
Three nested activity rings track move, burn and stand goals inside one compact dial.
Live preview Progress
Willow Halo Progress
A hairline gradient halo turns forever around a static value arc that holds forty six percent.
Live preview Sliders
Flange Pressure Lever
A conic gauge face reads the regulator while the rail marks its own red zone near the top.
Live preview Sliders
Turbine Throttle Pair
A spinning hub sits beside stacked rails whose colour-coded handles trim top speed and acceleration.
Live preview Tables
Tether Translation Rings
Completion per locale is drawn as a conic gradient donut and the finished one holds a soft pulse.
Live preview Timelines
Bearing Fault History
Each fault entry carries a split race ring and the open one turns the whole row red.
Live preview Timelines
Bloom Seasons Timeline
A conic wheel splits the year into four seasons while a slow hand sweeps around it.
Live preview Timelines
Gear Chain Timeline
Toothed wheels turn in opposite directions and a bead chain links each stage.
Live preview Timelines
Tundra Syllabus Steps
Course units read done, in progress and locked through three different markers.
Live preview Timelines
Vault Diploma Timeline
Certificates line up behind embossed wax seals and the one still pending loses its colour.
Live preview Timelines
Willow Start And Finish
A waving start flag opens the route and a chequered bar closes it at the end.