MENU

CSS Snippets

30 Seconds of CSS

A curated collection of useful CSS snippets you can understand in 30 seconds or less.

Layout

  • Box-sizing reset
  • Clearfix
  • Constant width to height ratio
  • Evenly distributed children
  • Flexbox centering
  • Grid centering
  • Grid layout
  • Truncate text

Visual

  • Circle
  • Custom scrollbar
  • Custom text selection
  • Dynamic shadow
  • Etched text
  • Gradient text
  • Hairline border
  • :not selector
  • Overflow scroll gradient
  • Pretty text underline
  • Reset all styles
  • Shape separator
  • System font stack
  • Triangle

Animation

  • Bouncing loader
  • Donut spinner
  • Easing variables
  • Hover underline animation

Interactivity

  • Disable selection
  • Mouse cursor gradient tracking
  • Popout menu
  • Sibling fade

Other

  • Counter
  • Custom variables

Original post: CSS Snippets

Leave a Comment!

Your email address will not be published. Required fields are marked *