Image gallery with horizontal or vertical scroll
Create a horizontally or vertically scrollable image gallery.
CSS Visual Snippets
The CSS snippet collection contains utilities and interactive examples for CSS3. It includes modern techniques for creating commonly-used layouts, styling and animating elements, as well as snippets for handling user interactions.
-
CSS · -
CSS · Styling checkboxes and radio buttons
Learn how to create customized and animated checkboxes and radio buttons with CSS.
-
CSS · How can I create a circular progress bar using only CSS?
Circular progress bars are fairly common in the web. Luckily, some new CSS features make it easier than ever to create them.
-
CSS · Mouse cursor gradient tracking
Create a hover effect where the gradient follows the mouse cursor, with CSS and a little bit of JavaScript.
-
CSS · Image overlay on hover
Learn how to display an image overlay effect on hover using CSS.
-
CSS · Squiggle link hover effect
Create the most whimsical link hover effect with a squiggle animation.
-
CSS · Reveal additional content on hover
Learn how you can create a card that displays additional content on hover.
-
CSS · List with floating or sticky section headings
Learn how to create a list with floating or sticky headings for each section.
-
CSS · 10 beautiful CSS background patterns
I hand picked 10 of my favorite CSS background patterns from MagicPattern for your next project. Get them now!
-
CSS · Scroll progress bar
Create a progress bar indicating the scroll percentage of the page, using CSS and JavaScript.
-
CSS · CSS Reset
A short, opinionated CSS reset to make your websites look great everywhere.
-
CSS · Input with prefix
Ever wanted to create an input with a visual, non-editable prefix? CSS can help you with that!
-
CSS · Image with text overlay
Learn how to create an image with a text overlay using CSS.
-
CSS · Image rotate on hover
Zoom in and rotate your images on hover and make them stand out.
-
CSS · Card with image cutout
Cutout effects seem tricky to implement, but they really aren't. CSS has you covered!
-
CSS · Create a toggle switch using HTML & CSS
A toggle switch is little more than a checkbox with a custom appearance. This snippet shows you how to create one without using JavaScript.
-
CSS · 25 CSS gradients for your next project
I hand picked 25 of my favorite CSS gradients from uiGradients for your next design. Get them now!
-
CSS · Isometric card
Learn how to create an isometric card using CSS.
-
CSS · Dynamic shadow
Learn how to create a shadow similar to
box-shadow, but based on the colors of the element itself. -
CSS · Hide element offscreen
Hide an element completely (visually and positionally) in the DOM while still allowing it to be accessible.
-
CSS · What are CSS variables and where can I use them?
Learn how CSS custom properties (CSS variables) work and what you can use them for in your code and designs.
-
CSS · Navigation list item hover & focus effect
Create a custom hover and focus effect for navigation items, using CSS transformations.
-
CSS · How can I create a custom responsive favicon for dark mode?
Learn how to create a custom responsive favicon that can adapt its color palette for dark mode with this quick guide.
-
CSS · Define a system font stack in CSS
Learn how to leverage the native fonts of the operating system to get close to a native app feel.