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.
CSS Animated underline link A link underline that grows from left to right on hover, drawn with a background gradient.
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 Checkerboard background pattern A two-color checkerboard drawn with one conic-gradient — no image.
CSS Corner ribbon badge A diagonal corner ribbon for "New", "Sale" or status labels on a card.
CSS Crosshatch background pattern A diagonal crosshatch of thin lines from two repeating-linear-gradients.
CSS CSS-only accordion A collapsible accordion built from the native details element, styled with a rotating marker — no JavaScript.
CSS CSS-only toggle switch An accessible on/off toggle switch built from a checkbox and a label — no JavaScript.
CSS CSS-only tooltip A pure-CSS tooltip that appears on hover and focus, with content from a data attribute.
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 Graph paper grid background A ruled grid (graph paper) background from two crossing linear-gradients.
Layout Holy grail layout (CSS Grid) The classic header, sidebar, content, aside and footer layout in a few lines using grid-template-areas.
CSS Hover lift card A card that smoothly lifts with a deeper shadow on hover, using a CSS transition.
CSS Liquid glass card An Apple-style liquid glass card with real SVG refraction — the backdrop bends through the glass. Pure CSS plus an SVG filter, no JavaScript.
Layout Media object (flexbox) A figure or avatar beside text that wraps naturally — the classic flexbox media object.
CSS Neumorphism (soft UI) card A soft, extruded neumorphic surface using paired light and dark shadows.
Layout Overlap elements with CSS Grid Stack elements in the same grid cell to layer a caption over an image — no absolute positioning.
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 Shake animation A horizontal shake built with @keyframes — great for signalling an invalid input or a wrong action.
CSS Skeleton loading shimmer An animated skeleton placeholder with a moving shimmer for loading states.
Layout Sticky footer with flexbox A footer that stays at the bottom of the viewport on short pages and gets pushed down by long content.
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.
CSS Zigzag background pattern A repeating zigzag (chevron) pattern made from four linear-gradients.