Accessible contrast pair
CSS color pairs that meet WCAG AA and AAA contrast ratios using oklch() for accessible text and backgrounds.
Animated background
A slowly animating gradient background using @keyframes and background-position. Smooth oklch color transitions with prefers-reduced-motion support.
Animated Dashed Border
A dashed border that animates its dash offset using CSS keyframes — pure CSS, no SVG required.
aspect-ratio for images
Use CSS aspect-ratio to maintain consistent image proportions (1:1, 16:9, 4:3) without layout shift. No JavaScript.
Aspect ratio for video embeds
Use the aspect-ratio property to lock a video embed container to 16/9 — the modern replacement for the padding-top hack that is now universally supported.
Auto-detect dark mode
Automatically switch between light and dark themes using prefers-color-scheme and CSS custom properties. No JavaScript required.
Blob Background
Soft organic blob shapes as a CSS background using radial-gradient and border-radius — no SVG or JavaScript.
box-sizing reset
A modern box-sizing reset: set border-box on all elements and pseudo-elements. It makes sizing predictable and prevents padding from breaking layouts.
Brand color in OKLCH
Convert brand colors to oklch() and derive a full palette of tints, shades, and variants from a single hue.
Checkerboard Pattern
A CSS-only checkerboard pattern using conic-gradient — no SVG, no images, pure CSS.
Circuit board pattern
A pure CSS circuit board background using layered linear gradients. No images, no SVG — just gradients. Copy and go.
color-mix() Blending
Use CSS color-mix() to blend two colors in oklch space — no JavaScript, no preprocessor required.
Conic gradient
CSS conic-gradient for color wheels and pie charts. Angular gradients with oklch colors — no SVG or canvas needed.
Cross-hatch Pattern
A CSS-only cross-hatch background pattern using two diagonal repeating-linear-gradients — no SVG or images required.
Dark mode borders and dividers
Dark mode borders and dividers snippet with a live demo, copyable CSS, and implementation prompt.
Dark mode button
Dark mode button snippet with a live demo, copyable CSS, and implementation prompt.
Dark mode card
Dark mode card snippet with a live demo, copyable CSS, and implementation prompt.
Dark mode code block
Dark mode code block snippet with a live demo, copyable CSS, and implementation prompt.
Dark mode color pair
Define paired light and dark mode colors using CSS custom properties and prefers-color-scheme media query.
Dark mode footer
Dark mode footer snippet with a live demo, copyable CSS, and implementation prompt.
Dark mode form inputs
Dark mode form inputs snippet with a live demo, copyable CSS, and implementation prompt.
Dark mode gradients
Design gradient backgrounds optimized for dark mode using oklch() with low lightness and controlled chroma.
Dark mode hero section
Dark mode hero section snippet with a live demo, copyable CSS, and implementation prompt.
Dark mode hero
Dark mode hero snippet with a live demo, copyable CSS, and implementation prompt.
Dark mode images (filter)
Dark mode images (filter) snippet with a live demo, copyable CSS, and implementation prompt.
Dark mode input
Dark mode input snippet with a live demo, copyable CSS, and implementation prompt.
Dark mode modal
Dark mode modal snippet with a live demo, copyable CSS, and implementation prompt.
Dark mode nav
Dark mode nav snippet with a live demo, copyable CSS, and implementation prompt.
Dark mode navigation
Dark mode navigation snippet with a live demo, copyable CSS, and implementation prompt.
Dark mode scrollbar
Dark mode scrollbar snippet with a live demo, copyable CSS, and implementation prompt.
Dark mode shadows
Box-shadow techniques that work on dark backgrounds — tinted oklch shadows with higher opacity and colored ambient layers.
Dark mode status badges
Dark mode status badges snippet with a live demo, copyable CSS, and implementation prompt.
Dark mode table
Dark mode table snippet with a live demo, copyable CSS, and implementation prompt.
Dark mode toast
Dark mode toast snippet with a live demo, copyable CSS, and implementation prompt.
Dark mode toggle
A pure CSS dark mode toggle using :has() on the root element to switch custom properties.
Design system palette in OKLCH
Generate a full design system color palette using OKLCH custom properties. Consistent lightness steps, perceptually uniform, dark-mode ready.
Diagonal Stripes
Pure CSS diagonal stripe pattern using repeating-linear-gradient with no images or SVG.
Dot Grid Pattern
Pure CSS dot grid background using radial-gradient and background-size for repeating patterns.
fit-content for headings
Use width: fit-content on headings and callout boxes so they size to their text — great for decorative underlines and background highlights that hug the content.
Fixed background
Create a fixed parallax-like background effect using background-attachment: fixed with CSS gradients and oklch().
Glass button
A frosted-glass button with backdrop-filter blur, semi-transparent background, and subtle border. Modern glass-morphism in pure CSS.
Glass navigation bar
A frosted-glass navigation bar using backdrop-filter blur and a semi-transparent background. Fixed position with content scrolling underneath.
Glass tooltip
Frosted glass tooltip using backdrop-filter: blur with oklch() semi-transparent background. Appears on hover/focus.
Glass card
A frosted glass card using backdrop-filter and oklch colors.
Gradient border
A card with a vibrant gradient border using background-clip and oklch colors.
Gradient text
Apply a vivid gradient to text using background-clip.
Image overlay background
Add color overlays to background images using CSS gradients and oklch() for readable text on photo backgrounds.
Layered realistic shadow
Multi-layer box-shadow for natural depth.
light-dark() function
The light-dark() CSS function: one-line dark mode color switching.
Linear gradient
CSS linear-gradient fundamentals with oklch colors. Multiple angle directions, color stops, and smooth gradient transitions.
max-content sizing for tags
Use width: max-content on tag chips to let them grow to their natural content width — perfect for a tag cloud where each chip wraps its label without truncation.
min-content sizing for buttons
Set width: min-content on a button to shrink it to exactly fit its label text — useful for inline button groups where labels vary in length.
Modern glassmorphism
Glassmorphism with backdrop-filter and oklch(): live demo, copy CSS, and LLM prompt.
Monochrome palette
Build a monochrome color palette using oklch() with zero chroma for perfectly neutral grays at any lightness.
Muted palette
Low-chroma OKLCH color palette for subtle, sophisticated interfaces. Desaturated colors that feel elegant without being gray.
Noise Texture
Add grain texture to any element using an inline SVG feTurbulence filter applied via CSS — no images, no JavaScript.
object-fit: contain for logos
Use object-fit: contain to display logo images at any size without distortion, preserving their aspect ratio inside a fixed container.
object-fit: cover for responsive media
A visual comparison of object-fit: cover, contain, and fill on fixed-dimension media containers. No JavaScript.
OKLCH accent color
Define accent colors in oklch() for vibrant, perceptually consistent interactive highlights and CTAs.
OKLCH border
Style borders with oklch() colors for perceptually uniform, vibrant border treatments on cards and containers.
OKLCH Gradient
Smoother, more vibrant CSS gradients by interpolating in oklch color space — no muddy grey midpoints.
OKLCH shadow
Colored box-shadows using oklch() with alpha channels. Layered shadows for depth, tinted shadows that match your palette.
OKLCH text color
Set text colors with oklch() for perceptually uniform, accessible type that maintains consistent visual weight.
Overflow: hidden crop
Use overflow: hidden on a container to crop images and content to a specific shape or size — the foundational technique behind image cards, avatars, and clipped layouts.
Parallax background
A CSS parallax scrolling effect using background-attachment: fixed and a gradient background. No images, no JavaScript.
Radial gradient
CSS radial-gradient for spotlight effects, glowing orbs, and vignettes. Circle and ellipse shapes with oklch colors.
Relative Color Syntax
CSS relative color syntax lets you derive new colors from existing ones — lighten, darken, or shift hue with a single expression.
Repeating Pattern Background
A CSS repeating-linear-gradient pattern background — fine diagonal lines tiled seamlessly across a surface.
Status Colors in OKLCH
A complete set of semantic status colors — success, warning, error, info — defined in OKLCH for perceptual consistency.
Topographic Lines
CSS-only topographic contour line background using repeating-radial-gradient — no SVG or images.
Vibrant palette
High-chroma OKLCH color palette for bold, vivid interfaces. Maximum saturation colors that stay perceptually balanced.
Video-like CSS background
Create a rich, video-like animated background using layered gradients, noise, and slow background-position movement. Pure CSS with reduced-motion fallback.
Wave pattern
A CSS-only wave/scallop repeating pattern built with radial-gradient and background-size tiling. No images, no JavaScript.
OKLCH colored shadow
Create richly colored box shadows using oklch() — match the shadow hue to the element color for natural, vibrant depth without the grey mudiness of rgba shadows.
Dark mode sidebar
A dark mode sidebar navigation using CSS custom properties and oklch() — adapts automatically to system color scheme preference.