Coyote Labby Coyote Concept

NewCSS only · SVG noise · mix-blend-mode

Grain

A warm gradient with living film grain on top, like a still from an old reel.

A free grainy gradient effect in HTML and CSS. Also known as film grain texture, noise gradient, grain overlay CSS or retro gradient button.

Class
.CCGrain
Weight
1.1 KB
Needs
CSS only
Best for
Creative studios, music, food and drink

Tune it

Every snippet on this page follows these settings.

How the Grain effect works

  1. The element is painted with a gradient from one accent to the other.
  2. ::after carries an SVG noise texture (feTurbulence), blended on top with mix-blend-mode: overlay.
  3. steps(4) keyframes jump the noise around, so the grain flickers like film rather than sliding.

Add it to your site

  1. Add the styles. Link https://coyoteconcept.com/lab/cc-lab.css once, or paste the CSS from any snippet below.
  2. Set a colourway. Wrap your content in class="CCTheme CCEmber", or any other colourway.
  3. Add the classes. For example <button class="CCButton CCGrain">.
  4. That’s it. Grain is CSS only.

Core components

Grain on button, dropdown, card.

More ways to use it

The same class on badge, headline.

The Grain code

The plain CSS 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
.CCGrain {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: transparent;
  color: var(--cc-on-accent);
  background: linear-gradient(120deg, var(--cc-accent), var(--cc-accent-2));
}
.CCGrain::after {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -1;
  opacity: calc(.55 * var(--cc-intensity));
  mix-blend-mode: overlay;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: ccGrain calc(.9s / var(--cc-speed)) steps(4) infinite;
}
.CCGrain:hover::after { opacity: calc(.85 * var(--cc-intensity)); }
.CCGrain :is(.CCCard-eyebrow, .CCCard-price, h3, p) { color: inherit; }
@keyframes ccGrain { 25% { transform: translate(-8%, 6%); } 50% { transform: translate(6%, -8%); } 75% { transform: translate(-4%, -6%); } }
@media (prefers-reduced-motion: reduce) { .CCGrain::after { animation: none; } }

Pairs well with

Avoid on the same element Moonrise (::after), Ember Sparks (clipping), Border Beam (::after), Glare Sweep (::after), Spotlight (::after), Shimmer Border (background), 3D Tilt (::after), Liquid Fill (fill), Ink Pour (fill), Northern Lights (background, fill), Stack Pop (fill), Metal (background, fill), Arrow Slide (fill), Sonar (::after), Soft Press (background), Pixel (fill), Goo (fill).

Browser support

Chrome & Edge0+
Safari0+
Firefox0+

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

Accessibility

  • Text sits in the on-accent colour over the gradient.
  • The grain holds still under reduced motion.

Performance

  • 1.1 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 Grain

What is a grainy gradient effect?

A warm gradient with living film grain on top, like a still from an old reel. Grain is a free grainy gradient effect, also known as film grain texture or noise gradient, that works on buttons, dropdowns, cards and more.

How do you make a grainy gradient effect in CSS?

The element is painted with a gradient from one accent to the other. ::after carries an SVG noise texture (feTurbulence), blended on top with mix-blend-mode: overlay. steps(4) keyframes jump the noise around, so the grain flickers like film rather than sliding.

How do I add Grain to a button?

Add the class CCGrain next to CCButton, inside an element with the CCTheme class, then include the Grain CSS. The Copy button on this page gives you all of it in one snippet.

Does Grain need JavaScript?

No, it's CSS only.

Which browsers support Grain?

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

Is Grain accessible?

Text sits in the on-accent colour over the gradient. The grain holds still under reduced motion.

Can I use Grain 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 CCGrain to a button or block.

Is Grain 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.