Codrops
  • All Posts
  • Demos Hub
  • Webzibition
  • The Collective

clip-pathgridpage-transitionsvg

Card Expansion Effect with SVG clipPath

In Playground, Jun 18, 2015 by Claudio Calautti

A morphing card expansion effect enhanced by a low poly background animation, using SVG clipPath and Trianglify.

flickitygridshopping-cart

Filterable Product Grid

In Blueprints, Jun 16, 2015 by Manoela Ilic

A responsive product grid layout with touch-friendly Flickity galleries and Isotope-powered filter functionality.

colorfilterslideshowsvg

Color Extraction Effect

In Playground, Jun 4, 2015 by Manoela Ilic

A little slideshow with a color palette creation effect using CSS Filters and Vibrant.js.

Wix Studio
Turn your one-off creations into a steady income stream by featuring your templates on the Wix Studio Marketplace. Cash in on your creativity—over and over again.
Readymag
Make designs interactive & publish as websites with Readymag. Transfer anything from Figma to Readymag in 4 clicks with a plugin.
Scrimba
Want to build websites but don’t know where to start? Scrimba's Frontend Developer Career Path is the perfect beginner-friendly course to kickstart your journey! Created with Mozilla MDN, it teaches you modern web development skills step by step. Codrops readers get 20% off Pro plans!
Explore the site
  • Home
  • Articles
  • Tutorials
  • Playground
  • Demos Hub
  • Webzibition
  • The Collective
  • CSS Reference
  • Freebies
  • About
  • Get in touch
  • Advertise
  • Privacy Policy
  • License
Follow Codrops
  • GitHub
  • Bluesky
  • Instagram
  • Facebook
  • Telegram
  • Mastodon
  • X
  • RSS Feed
  • Proudly hosted by Liquid Web hosting Liquid Web logo
  • Content delivered by
  • © Codrops 2025
Support us on Patreon logo