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.
No snippets match your filter.