NewCSS + small JS · clip-path · custom properties

Ink Pour

Colour pours in from exactly where the cursor enters and drains out towards where it leaves.

A free directional fill hover effect in HTML and CSS (with a few lines of JavaScript). Also known as ink fill from cursor, circle reveal hover, direction-aware hover or clip-path fill.

Class: .CCPour
Weight: 1.3 KB
Needs: CSS + a few lines of JS
Best for: Calls to action, cards, menus

Tune it

Every snippet on this page follows these settings.

How the Ink Pour hover effect works

Script records where the pointer crosses the edge, in --cc-x and --cc-y.
It also measures the distance from there to the farthest corner, in --cc-r.
::before is clipped to a circle of radius 0 at that point, then grows to --cc-r on hover, so the pour finishes just as the element is covered.
On leave the same circle shrinks towards the exit point.

Add it to your site

Add the styles. Link https://coyoteconcept.com/lab/cc-lab.css once, or paste the CSS from any snippet below.
Set a colourway. Wrap your content in class="CCTheme CCEmber", or any other colourway.
Add the classes. For example <button class="CCButton CCPour">.
Add the script. Include https://coyoteconcept.com/lab/cc-lab.js, or the few lines of JavaScript in the snippet.

Core components

Ink Pour on button, dropdown, card.

More ways to use it

The same class on badge.

The Ink Pour code

The plain CSS and JavaScript behind the effect. Colours, speed and strength come from the --cc- custom properties; the snippets above bundle it with the component styles and your settings.

Show the CSS

.CCPour {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --cc-x: 50%;
  --cc-y: 50%;
  --cc-r: 150%;
  transition: color calc(.8s / var(--cc-speed)) calc(.7s / var(--cc-speed));
}
.CCPour::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--cc-accent);
  clip-path: circle(0 at var(--cc-x) var(--cc-y));
  transition: clip-path calc(3s / var(--cc-speed)) cubic-bezier(.45, 0, .55, 1);
}
.CCPour:hover,
.CCPour:focus-visible,
.CCPour:focus-within { color: var(--cc-on-accent); }
.CCPour:hover::before,
.CCPour:focus-visible::before,
.CCPour:focus-within::before { clip-path: circle(var(--cc-r) at var(--cc-x) var(--cc-y)); }
.CCPour:is(:hover, :focus-visible, :focus-within) :is(.CCCard-eyebrow, .CCCard-price, h3, p) { color: inherit; }
@media (prefers-reduced-motion: reduce) { .CCPour::before { transition: none; } }

Show the JavaScript

document.querySelectorAll(".CCPour").forEach(function (el) {
  if (el.dataset.ccPour) return; el.dataset.ccPour = 1;
  function at(e) {
    var r = el.getBoundingClientRect(), x = e.clientX - r.left, y = e.clientY - r.top;
    el.style.setProperty("--cc-x", x + "px");
    el.style.setProperty("--cc-y", y + "px");
    el.style.setProperty("--cc-r", Math.hypot(Math.max(x, r.width - x), Math.max(y, r.height - y)) + "px");
  }
  el.addEventListener("pointerenter", at);
  el.addEventListener("pointerleave", at);
});

Pairs well with

Avoid on the same element Moonrise (::before), Ember Sparks (clipping), Spotlight (::before), Liquid Fill (::before, fill), Northern Lights (fill), Stack Pop (fill), Metal (fill), Arrow Slide (::before, fill), Sonar (::before), Grain (fill), Pixel (fill), Goo (fill).

Browser support

Chrome & Edge	0+
Safari	0+
Firefox	0+

Older browsers show the element without the effect: nothing breaks.

Accessibility

Text turns to the on-accent colour over the fill, so contrast holds.
On keyboard focus it pours from the centre.
Appears without spreading under reduced motion.

Performance

1.3 KB of code, no libraries.
Animates transforms, opacity and gradients, which browsers handle cheaply.
This page pauses every animation that’s scrolled out of view. Worth copying if you use lots of them.

Questions about Ink Pour

What is a directional fill hover effect?

Colour pours in from exactly where the cursor enters and drains out towards where it leaves. Ink Pour is a free directional fill hover effect, also known as ink fill from cursor or circle reveal hover, that works on buttons, dropdowns, cards and more.

How do you make a directional fill hover effect in CSS?

Script records where the pointer crosses the edge, in --cc-x and --cc-y. It also measures the distance from there to the farthest corner, in --cc-r. ::before is clipped to a circle of radius 0 at that point, then grows to --cc-r on hover, so the pour finishes just as the element is covered. On leave the same circle shrinks towards the exit point.

How do I add Ink Pour to a button?

Add the class CCPour next to CCButton, inside an element with the CCTheme class, then include the Ink Pour CSS and its few lines of JavaScript. The Copy button on this page gives you all of it in one snippet.

Does Ink Pour need JavaScript?

Yes, a few lines. They're included in every snippet and in the hosted cc-lab.js file.

Which browsers support Ink Pour?

Chrome and Edge 0+, Safari 0+ and Firefox 0+. Older browsers show the element without the effect, so nothing breaks.

Is Ink Pour accessible?

Text turns to the on-accent colour over the fill, so contrast holds. On keyboard focus it pours from the centre. Appears without spreading under reduced motion.

Can I use Ink Pour in React, Tailwind, WordPress, Shopify, Webflow or Squarespace?

Yes. There's a ready-made React component and a Tailwind version on this page. On WordPress, Shopify, Webflow, Wix or Squarespace, paste the CSS into the site's custom code or custom CSS area, then add the class CCPour to a button or block, and paste the JavaScript into the footer code area.

Is Ink Pour free for commercial use?

Yes. It's free for personal and client projects, with no sign-up. Credit and a link back are appreciated but never required.