30 seconds of code
Short code snippets for all your development needs
CSS 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.
Custom checkbox
CSS, Visual
Creates a styled checkbox with animation on state change.
List with floating section headings
CSS, Visual
Creates a list with floating headings for each section.
Image overlay on hover
CSS, Visual
Displays an image overlay effect on hover.
Mouse cursor gradient tracking
CSS, Visual
A hover effect where the gradient follows the mouse cursor.
Show additional content on hover
CSS, Visual
Creates a card that displays additional content on hover.
Navigation list item hover and focus effect
CSS, Visual
Creates a custom hover and focus effect for navigation items, using CSS transformations.
List with sticky section headings
CSS, Visual
Creates a list with sticky headings for each section.
Image rotate on hover
CSS, Animation
Creates a rotate effect for the image on hover.
Input with prefix
CSS, Interactivity
Creates an input with a visual, non-editable prefix.
Isometric card
CSS, Visual
Creates an isometric card.
Offscreen
CSS, Layout
Hides an element completely (visually and positionally) in the DOM while still allowing it to be accessible.
Scroll progress bar
CSS, Animation
Creates a progress bar indicating the scroll percentage of the page.
What are CSS variables and where can I use them?
CSS, Article
Learn how CSS custom properties (CSS variables) work and what you can use them for in your code and designs.
Focus Within
CSS, Visual
Changes the appearance of a form if any of its children are focused.
Learn how to create a custom responsive favicon that can adapt its color palette for dark mode with this quick guide.