Live preview Checkboxes
Card Flip Reveal
A card-style flip that reveals a checkmark face when checked.
#gradient CSS effects
4,959 free, pure-CSS effects match the "gradient" tag. Each is copy-ready and needs no library or build step.
Live preview Checkboxes
Gem Shape Fill
A CSS-cut gem shape that fills with an emerald gradient and flips when checked.
Live preview Checkboxes
Live preview Checkboxes
Animated Gradient Fill
A square filled with an animated gradient background and a white checkmark when checked.
Live preview Checkboxes
Hematite Metallic Stone
A silver metallic hematite stone reflects light when checked.
Live preview Checkboxes
Hexagon Fill
A hexagon outline that fills with an amber gradient and reveals a checkmark when checked.
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Jasper Spotted Stone
A red jasper stone with speckled pattern appears when checked.
Live preview Checkboxes
Jupiter Striped Giant
A banded gas giant with a great red spot appears when checked.
Live preview Checkboxes
Lapis Lazuli Stone
Deep blue lapis lazuli with golden flecks shimmers when checked.
Live preview Checkboxes
Malachite Banded Stone
A green banded malachite stone shows rings when checked.
Live preview Checkboxes
Live preview Checkboxes
Mercury Cratered Planet
A small gray cratered Mercury rotates into view when checked.
Live preview Checkboxes
Meteor Streak Toggle
A bright meteor streaks across the box when checked.
Live preview Checkboxes
Nebula Cloud Toggle
A soft swirling cloud of cosmic gas appears when checked.
Live preview Checkboxes
Neptune Deep Blue
A deep blue Neptune with a dark storm spot shows when checked.
Live preview Checkboxes
Northern Lights Curtain
A curtain of green and violet light shimmers when checked.
Live preview Checkboxes
Obsidian Volcanic Glass
A glossy black obsidian shard reflects light when checked.
Live preview Checkboxes
Onyx Black Stone
A polished black onyx stone with a glossy highlight when checked.
Live preview Checkboxes
Opal Multi-Color Toggle
A multi-colored opal shifts through iridescent hues when checked.
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Pearl Luster Toggle
A glowing pearl develops a soft iridescent sheen when checked.
Live preview Checkboxes
Pluto Dwarf Planet
An icy dwarf planet with a heart shape appears when checked.
Live preview Checkboxes
Pyrite Fool's Gold
A metallic gold pyrite cube shines brightly when checked.
Live preview Checkboxes
Live preview Checkboxes
Quasar Energy Beams
A bright galactic core emits twin beams when checked.
Live preview Checkboxes
Live preview Checkboxes
Sapphire Blue Gem
A deep blue sapphire glows with internal light when checked.
Live preview Checkboxes
Saturn Ringed Planet
A ringed Saturn tilted at an angle shows when checked.
Live preview Checkboxes
Shooting Star Trail
A star shoots across the box leaving a glowing trail when checked.
Live preview Checkboxes
Stardust Trail Toggle
A trail of golden stardust sparkles around the box when checked.
Live preview Checkboxes
Tarot Card Reveal
A mystical tarot card flips to reveal its face when checked.
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Metal Texture Toggle
A brushed metal texture with silver shine when checked.
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Stone Texture Toggle
A stone-textured box that solidifies gray when checked.
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Live preview Checkboxes
Turquoise Stone Toggle
A turquoise stone with webbed matrix lights up when checked.
Live preview Checkboxes
Live preview Checkboxes
Venus Golden Clouds
A warm yellow-orange Venus glows with thick clouds when checked.
Live preview Forms
Aurora Background Input
Northern lights aurora gradient background for the input.
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Glowing Background Input
Background glows brightly on focus, color seeping outward.
Live preview Forms
Gradient Background Input
Input with an animated gradient background that shifts on focus.
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Gradient Border Input
Input wrapped with an animated gradient border using padding box trick.
Live preview Forms
Live preview Forms
Live preview Forms
Rotating Gradient Border
Conic gradient border rotates around the input continuously.
Live preview Forms
Shimmer Border Input
Border has a traveling shimmer light effect on focus.
Live preview Forms
Trace Border Input
A glowing trace light travels around the input border on focus.
Live preview Forms
Animated Underline Border
Bottom underline grows from center outward on focus.
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Gradient Text Floating Label
Label takes on an animated gradient color when input is focused.
Live preview Forms
Material Design Input
Pure Material Design floating label with ripple-like underline.
Live preview Forms
Live preview Forms
Rainbow Color Picker
Color picker displayed as a horizontal rainbow gradient strip.
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Live preview Forms
Flip Credit Card Input
Credit card input that flips to show CVC field on focus.
Live preview Forms
Credit Card Preview
Credit card visual preview that updates on input focus.