Snippets

Ready-to-copy recipes with a live preview. Filter by category or search.

CSS Animated gradient background A smoothly shifting multi-color gradient background that loops forever.
Layout Aspect-ratio box Keep an element at a fixed width-to-height ratio with the aspect-ratio property.
CSS Bouncing loading dots Three dots that bounce in sequence — a tiny, dependency-free loading indicator.
CSS Corner ribbon badge A diagonal corner ribbon for "New", "Sale" or status labels on a card.
CSS CSS-only toggle switch An accessible on/off toggle switch built from a checkbox and a label — no JavaScript.
CSS Custom range slider A cross-browser styled range input with a themeable track and thumb.
CSS Custom styled scrollbar A slim, rounded custom scrollbar that works in Chromium, Safari and Firefox.
CSS Diagonal stripes background A repeating two-color diagonal stripe pattern from a single repeating-linear-gradient.
CSS Dotted grid background A repeating dot-grid background drawn with a single radial-gradient — no image.
CSS Glassmorphism card A frosted-glass card using backdrop-filter blur with a subtle border and highlight.
CSS Gradient border A crisp gradient border on a rounded element using the mask trick, with adjustable width and colors.
CSS Gradient text Fill text with a CSS gradient using background-clip, with adjustable colors and angle.
CSS Neumorphism (soft UI) card A soft, extruded neumorphic surface using paired light and dark shadows.
CSS PS5-style animated gradient border button A button with a conic-gradient border that rotates continuously, in the style of the PlayStation 5 UI.
CSS Pulse glow button A call-to-action button with a soft pulsing glow ring, built from an animated box-shadow.
CSS Pure CSS loading spinner A lightweight, dependency-free loading spinner with adjustable size, thickness, color and speed.
Layout Responsive grid with no media queries A card grid that automatically fits as many columns as will comfortably fit, using auto-fit and minmax.
CSS Skeleton loading shimmer An animated skeleton placeholder with a moving shimmer for loading states.
CSS Striped progress bar An animated candy-stripe progress bar with adjustable value, color and speed.
CSS Truncate text to N lines with ellipsis Clamp a block of text to a fixed number of lines with a trailing ellipsis, using line-clamp.