Dry Brush

Fill & Texture · Static · pure CSS

A dry sumi-e brush stroke: an anisotropic SVG turbulence filter punches thin, near-horizontal bristle voids straight through the solid ink fill, thickest and driest toward one end of the word. The inverse of a wet ink bleed — texture carved out of the stroke rather than spreading into it.

Open in the generator →All effects
Dry Brush

How it works

Dry Brush is a static fill & texture text effect rendered entirely in CSS. It relies on an inline SVG <defs> block (filters, gradients or clip-paths), which the HTML export carries alongside the CSS.

Controls

Dry Brush exposes 5 dedicated controls — Ink Hue, Streak Density, Dryness, Fade Direction and Terminal Fade — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.

CSS

/* Dry Brush — made with TEXT-FX · https://text-fx.app
 * HTML: requires the inline <svg> filter defs — see the HTML export.
 * Font: 'Archivo Black', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Archivo Black', sans-serif;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: none;
}

.text-effect {
  color: hsl(20 22% 92%);
  filter: url(#text-effect-kasure);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 72.1%, rgba(0,0,0,0.68) 100%);
  mask-image: linear-gradient(0deg, #000 0%, #000 72.1%, rgba(0,0,0,0.68) 100%);
}

HTML

This effect needs the markup below (per-letter spans, SVG defs, or a data-text attribute).

<!-- Made with TEXT-FX · https://text-fx.app -->

<style>
.text-effect {
  font-family: 'Archivo Black', sans-serif;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: none;
}

.text-effect {
  color: hsl(20 22% 92%);
  filter: url(#text-effect-kasure);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 72.1%, rgba(0,0,0,0.68) 100%);
  mask-image: linear-gradient(0deg, #000 0%, #000 72.1%, rgba(0,0,0,0.68) 100%);
}
</style>

<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
<filter id="text-effect-kasure" x="-15%" y="-30%" width="130%" height="160%" color-interpolation-filters="sRGB">
  <feTurbulence type="fractalNoise" baseFrequency="0.0205 0.456" numOctaves="3" seed="11" result="turb"/>
  <feComponentTransfer in="turb" result="voidMask">
    <feFuncA type="discrete" tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0"/>
  </feComponentTransfer>
  <feComposite in="SourceGraphic" in2="voidMask" operator="in"/>
</filter>
</defs></svg>

<div class="text-effect">Your text</div>
Category
Fill & Texture
Type
Static
Browser support
SVG feTurbulence + feComponentTransfer void filter + CSS gradient mask via filter:url(#…)
Capabilities
pure, svgDefs

Related Fill & Texture effects