Fundamentals

Buttons Text & Typography Forms Navigation & UI Loading

Design & Visuals

Backgrounds Glass & Morphism Visual Effects Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Depth Cursors

Gallery & More

Cards & Layouts Gallery & Media Data & Visualization Atmosphere Utilities
All Effects New Favorites Templates Blog Tips ✨ Go Premium

Utilities & Responsive

Utilities, container queries, responsive shapes and animated borders.

What are the essential utilities for a modern website? These 40 CSS and JavaScript snippets cover common needs: smooth scroll, copy to clipboard, dark mode toggle, responsive helpers, animation utilities and much more. Practical micro-tools to integrate in seconds.

Scroll this content to see the progress bar in action. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Scroll Progress Bar

Reading progress indicator with animated gradient at the top of the content.

JS Scroll Progress

Back to Top Button

Animated button that appears on scroll with bounce effect.

CSS Animation Scroll

Theme Toggle

Theme toggle with fluid sun/moon animation.

CSS Toggle Transition

Countdown Timer

Flip-clock style countdown with flip animation.

JS Animation Timer

Copy to Clipboard

Copy button with animated confirmation and visual feedback.

JS Click Feedback

Share Buttons

Social share buttons with hover effects and tooltips.

CSS Hover Social

Rating Stars

Rating system with animated stars and fill effect.

JS Interactive Rating

Like / Heart Button

Heart button with heartbeat animation and particle explosion.

JS Click Particles

Bookmark Toggle

Bookmark icon with elastic save animation.

CSS Toggle Animation

Notification Badge

Notification badge with pulse, bounce and shake animations.

JS Animation Badge

Adaptive Card

Layout switches from column to row based on container width.

@container CSS

Adaptive Card

Card that switches from vertical to horizontal layout via @container query when the container exceeds 280px.

CSS @container Layout

Responsive Nav

Navigation showing only icons when small, then adding labels when the container widens.

CSS @container Nav

Fluid Typography

Text sizes adapting in 3 tiers via @container at 260px and 320px. Button included.

CSS @container Typography

Dashboard Widget

Analytics widget with adaptive stats grid (1→2→4 columns) and chart appearing at 300px.

CSS @container Dashboard

Product Card

E-commerce product card that switches to horizontal layout and reveals the description and secondary button.

CSS @container E-commerce

Stats Panel

Statistics panel switching from 1 to 2 columns with trend indicators that appear.

CSS @container Stats

Media Card

Video card that switches to horizontal mode with extended description when the container exceeds 280px.

CSS @container Media

Sidebar Toggle

Sidebar that displays labels via @container when it expands. Main content adapts too.

CSS @container Sidebar

Form Adapt

Form whose fields switch from stacked to side-by-side when the container exceeds 280px.

CSS @container Form

Grid Morph

Grid switching from 1 to 2 then 3 columns with the first cell spanning 2 columns at max tier.

CSS @container Grid

Container Query Cards

The card changes layout (vertical, horizontal, minimal) based on container width with @container queries.

CSS @container Layout

Shape-Responsive Hero

The hero clip-path shifts from diagonal to curve then hexagonal based on container width.

CSS clip-path @container

Adaptive Navigation

Navigation transforms: hamburger, inline tabs, then sidebar based on container size.

CSS @container Navigation

Fluid Grid Morph

Grid items smoothly transition from 1 to 2 then 3 columns on resize with CSS transitions.

CSS Grid @container

Container Query Typography

Typography adapts its size, weight and spacing based on container dimensions via @container.

CSS @container Typography

Breakpoint Morphing Cards

Card elements (image, text, buttons) physically reorganize at container breakpoints.

CSS @container Morph

Responsive Chart

The chart switches from a simple sparkline to a detailed bar chart with labels based on available space.

CSS @container Data Viz

Sidebar Collapse

The sidebar switches from icons only to a full navigation with labels based on container width.

CSS @container Sidebar

Responsive Pricing Table

Pricing cards switch from vertical stack to side by side with animated transitions.

CSS @container Pricing

Dynamic Aspect Ratio

The media container changes aspect ratio (1:1, 4:3, 16:9, 21:9) based on width via @container.

CSS @container Aspect Ratio
Gradient Spin

Gradient Border Spin

Spinning conic-gradient border using @property to animate the angle. The viral spinning border effect.

CSS @property Gradient

Dashed Border March

Dashed border with dashes scrolling continuously via animated stroke-dashoffset.

SVG Animation Dash

Neon Border Pulse

Neon border that pulses with alternating intensity glow via animated box-shadow.

CSS Neon Glow

Border Draw-On

The border draws from a corner and traces the full perimeter with 4 sequentially animated pseudo-elements.

CSS Hover Sequential

Double Line Border

Two concentric animated borders rotating in opposite directions with distinct colors.

CSS @property Multi-layer

Lightning Border

Electric/lightning effect using an SVG feTurbulence filter with animated seed for an organic look.

SVG Filter Electric

Gradient Border Morph

Gradient border that fluidly morphs to a new color set on hover.

CSS Hover Gradient

Corner Accent Borders

Only corners are bordered, with colored accents that elongate on hover.

CSS Hover Corners

Border Ripple

On click, a light pulse travels along the border perimeter with propagating waves.

JS Click Ripple

Dotted Constellation Border

Dots along the border connected by animated lines forming a constellation on hover.

SVG JS Interactive

CSS Anchor Tooltip Pro

Tooltips natively anchored to any element with anchor-name / position-anchor, with auto-flip. 100% CSS display via :has(). Automatic absolute fallback.

Anchor PositioningModern CSSPremium

Flash Sale Countdown

Flip-clock countdown with a draining urgency bar, designed for flash sales. Duration and labels are customizable; connects to a real end date.

💡 Perfect for: flash sale, Black Friday, product launch, limited offer, promo banner, urgency pop-up.

Vanilla JS Flip-clock Urgency Premium

Frequently Asked Questions

How to enable smooth scroll in CSS? +

Add html { scroll-behavior: smooth } to your CSS. All anchor links (#section) will animate scrolling automatically. For finer control, use element.scrollIntoView({ behavior: 'smooth' }) in JavaScript.

How to copy text to clipboard in JavaScript? +

Use navigator.clipboard.writeText(text). It's the modern, async and secure API. Only works over HTTPS. As fallback, create a temporary textarea, select its content, and execute document.execCommand('copy').

How to create a dark mode toggle? +

Add a class (theme-light) on body that inverts colors via CSS custom properties. Save the preference in localStorage. On load, read localStorage and apply the class before rendering to avoid flash.

How to detect if an element is visible on screen? +

Use IntersectionObserver. Create an observer with the desired threshold (0.1 = 10% visible, 1 = 100%). Observe the element. The callback is called when visibility changes. More performant than a scroll listener.

How to debounce a function in JavaScript? +

Create a wrapper function that cancels the previous timer and creates a new one: function debounce(fn, delay) { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => fn(...args), delay); }; }. Use for search, resize, scroll.

Similar Categories

🧭

Navigation & UI

36 effects

 📊

Data & Visualization

28 effects

 📝

Forms

20 effects