A little fun experiment where you can color a website mockup by dragging and dropping a color droplet from a palette.
A responsive, magazine-like website layout with a grid item animation effect that happens when opening the content.
A tutorial on how to create a slider with a "prism" effect using HTML5 canvas globalCompositeOperation and a layering technique.
Learn how to create a playful "Jump Loader" animation with SVG and GSAP.
A set of 30 organic food icons that come in all common (vector-based) formats. The food icon set is perfect for modern food related projects.
A couple of more inspirational styles for text input effects including some new techniques and ideas.
A responsive Bootstrap website template made by the folks from Pixel Buddha and PSD2HTML. The elegant one-page design is perfect for web dev, apps or software relate
A set of examples that use a gooey SVG filter for creating a variety of different effects for all kinds of website components.
A set of 36 colorful and versatile travel and vacation related icons. The icons have a flat design with a long shadow and they come in several vector formats.
A little playful content navigation effect that uses the draggable Elastic Stack and Snap.svg for animating a background shape like a trampoline. The demos are a tri
A set of 40 carefully-crafted and pixel-perfect icons from the Squid.ink Flat Icon Pack exclusively for Codrops readers. The icons come in all commonly used formats.
A collection of fresh button styles and effects for your inspiration. We use CSS transitions and pseudo-elements for most of the effects.
A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG.
A set of subtle effects for click or touch interactions inspired by the visualization of screen taps in mobile app showcases. The effects are done with CSS animation
We've released a new section on Codrops: the CSS Reference. Discover more about it and what features we've added to make learning CSS more easy and practical.
A modern free HTML5/CSS3 website template with a polished look and smooth animations, carefully crafted with the latest web technologies.
Some fun effect and layout ideas for the first step of a checkout process in an online store. We are using the morphing buttons concept together with CSS transforms