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

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
Hover to simulate scrolling

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
12
12
Hours
:
34
34
Minutes
:
56
56
Seconds

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
★ ★ ★ ★ ★
Click to rate

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
Save

Bookmark Toggle

Bookmark icon with elastic save animation.

CSS Toggle Animation
🔔 3

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
Home
Search
Profile

Responsive Nav

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

CSS @container Nav

Adaptive Title

Text adapts to container size using container queries. Three size tiers.

Fluid Typography

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

CSS @container Typography

Analytics

+8.2%
1.2kViews
84Clicks
3.1%CTR
12sDuration

Dashboard Widget

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

CSS @container Dashboard

Premium Pack

49 €

Access to all premium effects and templates.

Product Card

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

CSS @container E-commerce
2.4kUsers
+12%
186Favorites
+8%
4.2mAvg. Duration
-3%
9.8k€Revenue
+21%

Stats Panel

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

CSS @container Stats
3:42

Container Queries 101

12k views · 2 days

Learn to create truly responsive components with @container.

Media Card

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

CSS @container Media
Home
Projects
Settings

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
1 · span 2
2
3
4
5
6

Grid Morph

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

CSS @container Grid
⚖
Adaptive Card

This content appears and the layout changes based on container width.

Drag to resize container

Container Query Cards

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

CSS @container Layout

Shape Hero

Clip-path changes with size

Drag to resize container

Shape-Responsive Hero

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

CSS clip-path @container
Home About Blog Contact
Home About Blog Contact
Page content area
Drag to resize container

Adaptive Navigation

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

CSS @container Navigation
A
B
C
D
E
F
Drag to resize container

Fluid Grid Morph

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

CSS Grid @container

Typography Adapts

Text size, weight and spacing dynamically adjust based on container dimensions using container queries.

Drag to resize container

Container Query Typography

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

CSS @container Typography
Morphing Product

Image, text and buttons physically reorganize at container breakpoints.

Drag to resize container

Breakpoint Morphing Cards

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

CSS @container Morph
Monthly Revenue
Jan12k
Feb16k
Mar14k
Apr21k
May18k
Jun24k
Jul20k
Aug25k
Drag to resize container

Responsive Chart

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

CSS @container Data Viz
Home
Search
Profile
Settings
Main content
Drag to resize container

Sidebar Collapse

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

CSS @container Sidebar
Starter
9€/mois
  • 5 projects
  • 10 GB storage
  • Email support
Pro
29€/mois
  • Unlimited projects
  • 100 GB storage
  • Priority support
Enterprise
99€/mois
  • Everything unlimited
  • 1 TB storage
  • 24/7 support
Drag to resize container

Responsive Pricing Table

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

CSS @container Pricing
Dynamic Ratio 1:1
Drag to resize container

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 March

Dashed Border March

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

SVG Animation Dash
Neon Pulse

Neon Border Pulse

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

CSS Neon Glow
Draw-On

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

Double Line Border

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

CSS @property Multi-layer
Lightning

Lightning Border

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

SVG Filter Electric
Gradient Morph

Gradient Border Morph

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

CSS Hover Gradient
Corner Accent

Corner Accent Borders

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

CSS Hover Corners
Click Me

Border Ripple

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

JS Click Ripple
Constellation

Dotted Constellation Border

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

SVG JS Interactive

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