Ikat

이카트

A weaving technique where yarn is tie-dyed before weaving, leaving the pattern's signature soft, slightly bled edges.

Also known as: 이캇카스리(絣, 일본)
···
html
<div class="ik"></div><span class="tag">ikat</span>
css
.ik{position:absolute;inset:-6%;background-color:#2b2140;
  background-image:repeating-conic-gradient(from 45deg,#c9536f 0deg 90deg,#e0a23f 90deg 180deg);
  background-size:64px 64px;
  filter:blur(6px) saturate(1.15);
  animation:pan 13s linear infinite}
@keyframes pan{to{background-position:64px 64px}}
.tag{position:absolute;left:10px;bottom:8px;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.55);
  color:#fbe8d8;font:600 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em}

The name comes from Malay/Indonesian "mengikat," to tie or bind. It's a resist-dyeing technique, not printing, and it developed independently in several unrelated places — Indonesia, Central Asia (Uzbekistan), India, Japan (kasuri), and Latin America.

The key step happens before weaving: bundles of yarn are tightly bound in the shape of the intended motif so dye can't reach the bound sections, then untied and woven. Because binding and weaving are both done by hand, the colour boundaries never align perfectly, so the pattern's edges come out slightly soft and bled — that's not a flaw, it's the trait that tells ikat apart from every other woven pattern.

To fake that bleed in CSS, build a crisp diamond or chevron motif with a conic-gradient and lay filter: blur() over it. Blurring an otherwise sharp geometric pattern is itself the construction tip — it compresses ikat's real structural cause (hand-bound, hand-woven misalignment) into one visual move.

When to use

Use for boho/global-textile moods and home decor backgrounds. Too much blur just reads as an out-of-focus background — keep just enough for the motif's outline to survive.