NewCSS + small JS · filter: blur() · animation-delay

Focus Blur

The label drops out of focus, then sharpens letter by letter, like a lens finding its subject.

A free blur text reveal in HTML and CSS (with a few lines of JavaScript). Also known as focus blur animation, text blur in, lens focus effect or blur to sharp text.

Class: .CCBlur
Weight: 1.2 KB
Needs: CSS + a few lines of JS
Best for: Photography, film, fashion, launches

Tune it

Every snippet on this page follows these settings.

How the Focus Blur hover effect works

Script splits each label into letters with their index as --i.
One keyframe starts each letter blurred, faint and slightly large, and ends it sharp.
Each letter starts 45ms after the one before, so focus sweeps along the word.

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 CCBlur">.
Add the script. Include https://coyoteconcept.com/lab/cc-lab.js, or the few lines of JavaScript in the snippet.

Core components

Focus Blur on button, tabs, dropdown, card.

More ways to use it

The same class on headline, badge, nav bar.

The Focus Blur 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

.CCBlur .CCBlur-l { display: inline-block; white-space: pre; }
.CCBlur:is(:hover, :focus-visible, :focus-within) .CCBlur-l {
  animation: ccBlur calc(.55s / var(--cc-speed)) cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(var(--i) * 45ms / var(--cc-speed));
}
@keyframes ccBlur { 0% { filter: blur(calc(6px * var(--cc-intensity))); opacity: .15; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .CCBlur .CCBlur-l { animation: none !important; } }

Show the JavaScript

document.querySelectorAll(".CCBlur").forEach(function (el) {
  if (el.dataset.ccBlur) return; el.dataset.ccBlur = 1;
  var targets = el.matches("button, h1, h2, h3, .CCBadge") ? [el] : [].slice.call(el.querySelectorAll("h3, a, [role=tab]"));
  targets.forEach(function (t) {
    [].slice.call(t.childNodes).forEach(function (node) {
      if (node.nodeType !== 3 || !node.textContent.trim()) return;
      var box = document.createElement("span");
      if (!t.hasAttribute("aria-label")) t.setAttribute("aria-label", t.textContent.trim());
      box.setAttribute("aria-hidden", "true");
      node.textContent.split("").forEach(function (ch, i) {
        var s = document.createElement("span"); s.className = "CCBlur-l"; s.style.setProperty("--i", i); s.textContent = ch; box.appendChild(s);
      });
      t.replaceChild(box, node);
    });
  });
});

Pairs well with

Avoid on the same element Howl Glitch (text), Text Scramble (text), Letter Wave (text), Text Roll (text), Squiggle (text), Flip (text).

Browser support

Chrome & Edge	0+
Safari	0+
Firefox	0+

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

Accessibility

The real label stays the accessible name.
Plays on keyboard focus too.
Holds still under reduced motion.

Performance

1.2 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 Focus Blur

What is a blur text reveal?

The label drops out of focus, then sharpens letter by letter, like a lens finding its subject. Focus Blur is a free blur text reveal, also known as focus blur animation or text blur in, that works on buttons, tab bars, dropdowns, cards and more.

How do you make a blur text reveal in CSS?

Script splits each label into letters with their index as --i. One keyframe starts each letter blurred, faint and slightly large, and ends it sharp. Each letter starts 45ms after the one before, so focus sweeps along the word.

How do I add Focus Blur to a button?

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

Does Focus Blur need JavaScript?

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

Which browsers support Focus Blur?

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

Is Focus Blur accessible?

The real label stays the accessible name. Plays on keyboard focus too. Holds still under reduced motion.

Can I use Focus Blur 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 CCBlur to a button or block, and paste the JavaScript into the footer code area.

Is Focus Blur 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.