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.

Updated

Which small CSS and JavaScript utilities does a modern website need?

Utilities are small, reusable pieces for everyday needs: a scroll progress bar, a back-to-top button, a theme toggle, copy to clipboard, share and rating buttons, countdowns. They sit next to modern responsive techniques on this page: container queries, fluid shapes and animated gradient borders built with @property.

How to choose, performance and accessibility
  • Add a Scroll Progress Bar to long articles, Back to Top on long pages, a Theme Toggle that remembers the choice and follows prefers-color-scheme, and Copy to Clipboard next to code or promo codes.
  • Use the Clipboard API rather than the deprecated execCommand, give icon-only buttons an accessible name, and debounce scroll and resize handlers.
  • Scroll Progress Bar, Adaptive Card and Gradient Border Spin are free with their full code; the other utilities come with Premium.

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
View source code
HTML
<div class="demo-preview">
  <div class="scroll-progress-container">
    <div class="scroll-progress-bar" id="scrollProgressBar"></div>
    <div class="scroll-progress-content" id="scrollContent">
      <p>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.</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
      <p>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.</p>
      <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
    </div>
  </div>
</div>
CSS
.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(26, 26, 36);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.scroll-progress-container {
  width: 100%;
  height: 100px;
  background: #1a1a2e;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.scroll-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #d946ef);
  transition: width 0.1s ease-out;
}

.scroll-progress-content {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  line-height: 1.6;
}
JavaScript
(function() {
  const scrollProgressBar = document.getElementById('scrollProgressBar');

  if (scrollContent && scrollProgressBar) {
    scrollContent.addEventListener('scroll', function() {
      const scrollTop = scrollContent.scrollTop;
      const scrollHeight = scrollContent.scrollHeight - scrollContent.clientHeight;
      const progress = (scrollTop / scrollHeight) * 100;
      scrollProgressBar.style.width = 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
View source code
HTML
<div class="demo-preview">
  <div class="cq-adaptive-wrap">
    <div class="cq-adaptive-card">
      <div class="cq-adaptive-img"></div>
      <div class="cq-adaptive-body">
        <h4>Adaptive Card</h4>
        <p>Layout switches from column to row based on container width.</p>
        <div class="cq-adaptive-tags">
          <span class="cq-adaptive-tag">@container</span>
          <span class="cq-adaptive-tag">CSS</span>
        </div>
      </div>
    </div>
  </div>
</div>
CSS
.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 280px;
  overflow: hidden;
  position: relative;
  background: rgb(10, 10, 15);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.demo-preview:has(.cq-resizable),
.demo-preview:has(.cq-adaptive-wrap) {
  min-height: 280px;
  background: #0a0a0f;
}

.cq-adaptive-wrap {
  container-type: inline-size;
  container-name: adaptive;
  width: 100%;
  max-width: 340px;
  resize: horizontal;
  overflow: hidden;
  min-width: 160px;
  border: 1px dashed rgba(139, 92, 246, 0.3);
  border-radius: 16px;
  position: relative;
}

.cq-adaptive-wrap::after {
  content: '⟷ Redimensionnez';
  position: absolute;
  bottom: 4px;
  right: 10px;
  font-size: 0.6rem;
  color: rgba(139, 92, 246, 0.4);
  pointer-events: none;
  z-index: 2;
}

.cq-adaptive-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  transition: all 0.3s ease;
}

.cq-adaptive-img {
  width: 100%;
  height: 80px;
  border-radius: 10px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.cq-adaptive-body h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}

.cq-adaptive-body p {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  line-height: 1.5;
}

.cq-adaptive-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cq-adaptive-tag {
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(139, 92, 246, 0.15);
  font-size: 0.6rem;
  font-weight: 600;
  color: #a78bfa;
}
JavaScript
/* Pure CSS — no JavaScript required */

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
View source code
HTML
<div class="demo-preview">
  <div class="border-box border-gradient-spin">
    Gradient Spin
  </div>
</div>
CSS
.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(26, 26, 36);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

@property --spin-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.border-box {
  width: 200px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: white;
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  font-family: inherit;
  user-select: none;
}

.border-gradient-spin {
  background: #0a0a0f;
  z-index: 1;
}

.border-gradient-spin::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 15px;
  background: conic-gradient(from var(--spin-angle), #ff0080, #ff8c00, #40e0d0, #7b2ff7, #ff0080);
  z-index: -2;
  animation: spinGradient 3s linear infinite;
}

.border-gradient-spin::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: #0a0a0f;
  border-radius: 9px;
  z-index: -1;
}

.border-gradient-spin:hover::before {
  animation-duration: 1s;
  filter: blur(4px);
}

@keyframes spinGradient {
  to {
    --spin-angle: 360deg;
  }
}
JavaScript
/* Pure CSS — no JavaScript required */

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

Hypno Cascade

Hypnotic cascade of 24 petals phased by sibling-index() — zero JavaScript, zero data in the markup. Per-index OKLCH hues, universal var(--i) fallback.

💡 Perfect for: waiting screens, AI generation states, decorative heroes, processing indicators.

CSS sibling-index Zero-JS Premium

Ruled Grid

Native gap decorations: styled rules living inside the grid gutters — no extra divs, no pseudo-elements. Animated counters, gradient fallback.

💡 Perfect for: dashboards, stat grids, editorial tables, pricing pages.

CSS Gap Decorations Dashboard Premium

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