Design Atlas
한국어
✦ Visual effects

Noise gradient border

노이즈 그라데이션 보더

A flowing gradient border with fine noise layered in, trading a slick digital look for the rougher texture of print or film.

Also known as: Grainy gradient borderTextured border
···
html
<div class="ngb" id="ngb">
  <div class="noise"></div>
  <div class="inner"><strong>Limited run</strong><span>noise + gradient edge</span></div>
</div>
css
.ngb{--a:0deg;position:relative;overflow:hidden;width:min(240px,80%);border-radius:16px;padding:2px;
  background:conic-gradient(from var(--a),var(--accent),var(--accent-2),var(--accent-3),var(--accent))}
.noise{position:absolute;inset:0;opacity:.45;mix-blend-mode:overlay;
  background-image: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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.inner{position:relative;border-radius:14px;background:var(--surface);padding:26px 22px;display:grid;gap:5px;text-align:center}
.inner strong{color:var(--fg);font-size:16px}
.inner span{color:var(--muted);font-size:12px}
js
const el = document.getElementById('ngb');
let a = 0;
(function loop(){ a = (a + 1.2) % 360; el.style.setProperty('--a', a + 'deg'); requestAnimationFrame(loop); })();

The skeleton is the same double-background trick as a gradient border — a conic-gradient outside, a surface-coloured fill inside, so colour only shows through the border's thickness. Layer a noise image generated with an SVG feTurbulence filter over that border and blend it with mix-blend-mode: overlay, and the surface roughens while the border's colour information survives.

The noise layer needs to sit beneath the solid inner fill so it only shows within the border's thickness, keeping the card's interior clean. Keep rotating the gradient's angle with JS and the colour flows while the grain stays fixed in place — smooth light and rough texture sitting in contrast within the same border.

Where film grain spreads noise across an entire frame for a photographic texture, this confines that same noise to a narrow border and combines it with a moving gradient.

When to use

Use for a brutalist or analogue-mood product card, or a limited-edition badge. Too much noise just muddies the border colour — keep its opacity at 0.5 or below.