Snippet library
CSS snippets for WordPress.
27 free & Pro snippets and modules. Copy-paste-ready, or import in one click with SnipCraft.
Respect prefers-reduced-motion
Disables CSS animations and transitions for users who have enabled the reduce-motion accessibility setting in their operating system.
CSS-Only Hamburger Toggle
A fully CSS-driven hamburger menu toggle using a hidden checkbox and sibling selectors — no JavaScript required.
Aspect-Ratio Media Wrapper
CSS utilities for maintaining consistent aspect ratios on images, videos, and iframes using the native aspect-ratio property.
Fluid Typography With clamp()
Scales heading and body font sizes smoothly across all viewport widths using CSS clamp(), eliminating hard breakpoint jumps.
Mobile/Desktop Visibility Classes
Provides utility classes to show or hide elements at mobile, tablet, and desktop breakpoints without any JavaScript.
Sticky Sidebar on Scroll
Pins the sidebar to the viewport as the user scrolls using CSS position: sticky, with a configurable offset for fixed headers.
Responsive Stacking Tables on Mobile
Makes wide HTML tables readable on small screens by collapsing each row into a labelled card layout using data attributes and no JavaScript.
Equal-Height Card Grid
Uses CSS Grid and flexbox to build a responsive card layout where every card in the same row shares the same height with footers pinned to the bottom.
Custom-Styled Checkboxes and Radios
Replaces native checkbox and radio button appearance with fully CSS-styled controls that match brand colours and scale with the font size.
Style Form Placeholder Text
Applies consistent colour and font-style to placeholder text in all form inputs and textareas, with a subtle fade on focus.
Prevent Widows in Headings
Uses CSS text-wrap: balance on headings and text-wrap: pretty on body copy to prevent orphaned single words on the last line.
Modern CSS Reset
A lightweight opinionated CSS reset that normalises browser defaults, enforces border-box sizing, and improves baseline typography across all elements.
Add font-display swap to Fonts
Provides a @font-face template with font-display: swap so self-hosted fonts use a fallback immediately, eliminating invisible text during load (FOIT).
Color-Code Post Status in List
Applies subtle background tints to draft, pending, scheduled, private, and trashed rows in the Posts list table.
Move Admin Bar to Bottom
Repositions the WordPress toolbar from the top of the viewport to the bottom using CSS overrides.
Dark Mode via prefers-color-scheme
Applies a full dark-mode palette through CSS custom properties when the OS dark-mode preference is active.
Skeleton Loading Shimmer Animation
Provides animated shimmer placeholder blocks (text lines, avatar, card) to show while content is loading.
Smooth Scroll with Header Offset
Enables CSS smooth scrolling globally and adds a scroll-margin-top to anchor targets so they clear a fixed header.
Custom Text Selection Color
Overrides the browser default text-selection highlight with brand colours, with a separate scheme for code blocks.
Visible Focus Outline (Accessibility)
Hides the focus ring for mouse/touch users while preserving a clear, high-contrast outline for keyboard navigation.
Responsive 16:9 Video Wrapper
Wraps iframes and video embeds in a fluid container that maintains a 16:9 aspect ratio at any viewport width.
Print Stylesheet
Hides navigation and sidebars, forces black text, and expands link URLs for a clean print layout.
Custom Scrollbar Styling
Replaces the browser default scrollbar with a slim, themed scrollbar using WebKit and Firefox APIs.
Sticky Footer Layout
Forces the page footer to stay at the bottom of the viewport on short-content pages using flexbox.