Back to the clip-path guide

Effects using clip-path

The catalog contains 588 effects using clip-path. The 96 most-viewed examples are shown below. Read the clip-path guide for a complete explanation.

7 Segment Displayloader-7-segment

3D Chevron Breadcrumbsnav-crumb-3d-chevron

Aperture Iris Closehover-aperture-iris

Square Arrow Lefttip-arrow-square-left

Arrow Hexagon Shape Navbarnav-arrow-hexagon-shape

Rivet Downloads Accordionacc-rivet-downloads

Award Ribbonbadge-award-ribbon

Cave Stalactite Badgebadge-cave-stalactite

Bronze Award Ribbonbadge-ribbon-award-bronze

Star Burst Sealbadge-seal-star-burst

Arrow Tag Shape Badgebadge-shape-arrow-tag

Star Shape Badgebadge-shape-star

State Queued Badgebadge-state-queued

Tag With Holebadge-tag-with-hole

Tuning Fork Ringbg-tuning-fork-ring

Invite Only Cardcard-invite

Hourglass Checkboxcheck-hourglass-turn

Sparkle Twinklecheck-sparkle

Axe Choploader-axe-chop

Camera Shutterloader-camera-shutter

Ice Cream Meltloader-ice-cream-melt

Icicle Driploader-icicle-drip

Pilgrim Hatloader-pilgrim-hat-buckle

Rune Glowloader-rune-glow

Timing Beltloader-timing-belt

3D Arrow Breadcrumbsnav-crumb-3d-arrow

Text Reveal Mask Navbarnav-text-reveal-mask

Origami Cusp Progressprog-origami-cusp

Circle Masktip-circle-mask

Diamond Grow Cliptip-clip-diamond-grow

Message Tail Cliptip-clip-message-tail

Tornado Formtoggle-tornado-form

Echo Origami Accordionacc-echo-origami

Gear Crown Leader Avatarava-gear-crown

Meadow Notched Corner Avatarava-meadow-notch

Rivet Achievement Star Avatarava-rivet-achievement

Framework Angular Badgebadge-framework-angular

Striped Ribbonbadge-ribbon-stripe

Diamond Shape Badgebadge-shape-diamond

Hex Shape Badgebadge-shape-hex

Shield Shape Badgebadge-shape-shield

Triangle Shape Badgebadge-shape-triangle

Tier Silver Shield Badgebadge-tier-silver-shield

City Fogbg-city-fog

Cliff Coastbg-coast-cliff

Croissant Flakebg-croissant-flake-puff

Dust Devilbg-dust-devil

Energy Wavebg-energy-wave

Lightning Stormbg-lightning

Monstera Leafbg-monstera-leaf

Plasma Arcbg-plasma-arc

Running Track Curvebg-running-track-curve

Obeliskbtn-obelisk

Turretbtn-turret

Discount Voucher Cardcard-discount

Ribbon Award Cardcard-ribbon-award

Amethyst Purple Gemcheck-amethyst

Emerald Green Gemcheck-emerald-stone

Quartz Cluster Togglecheck-quartz

Scanline Checkboxcheck-scanline-fill

Border Draw Fullhover-border-draw-full

Cyber Glitchhover-cyber-glitch

Hexagon Cliphover-mask-clip-hexagon

Aurora Curtainloader-aurora-curtain

Banner Waveloader-banner-wave

Boat Anchorloader-boat-anchor

Brownie Biteloader-brownie-bite

Carnival Maskloader-carnival-mask-feather

Celebration Burstloader-celebration-burst

Chess Knightloader-chess-knight

Christmas Tree Glowloader-christmas-tree-glow

Deflector Shieldloader-deflector-shield

Dumpling Foldloader-dumpling-fold

Emerald Flashloader-emerald-flash

Fencing Lungeloader-fencing-lunge

Force Fieldloader-force-field

Gem Glintloader-gem-glint

Hex Tile Spinloader-hex-tile-spin

Hexagon Spinnerloader-hexagon

Horse Galloploader-horse-gallop

Jewel Sparkloader-jewel-spark

Joker Grinloader-joker-grin-card

Metronome Tickloader-metronome-tick-2

Heptagon Rotateloader-poly-heptagon

Pretzel Twistloader-pretzel-twist

Santa Sleigh Flyloader-santa-sleigh-fly

Saxophoneloader-saxophone

Spinning Toploader-spinning-top

Trumpet Valvesloader-trumpet-valve

Wine Pourloader-wine-pour

Chevron Outline Breadcrumbsnav-crumb-chevron-outline

Pentagon Background Tabsnav-tab-bg-pentagon

Morph Triangle Tabsnav-tab-morph-triangle

Text Glitch Hover Navbarnav-text-glitch-hover

Meadow Star Ratingrange-meadow-rating

Wisp Sparkle Sliderrange-wisp-sparkle

Continue exploring

clip-path guide All guides CSS reference