Square Kufic

Fill & Texture · Static · pure CSS

Banna'i brick tilework: the word is set in a heavy squared face and glazed turquoise, terracotta or cobalt, each glyph subdivided into square bricks by two crossed mortar-line gradients on one shared em-module. A recessed unglazed-clay panel behind the letters paints the same brick grid, so the negative space interlocks with the type like a labyrinth, framed by an inset one-tile border course. Tune the module, glaze and mortar contrast, or drop the panel for floating glazed-brick lettering.

Open in the generator →All effects
Square Kufic

How it works

Square Kufic is a static fill & texture text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.

Controls

Square Kufic exposes 4 dedicated controls — Brick, Glaze, Mortar and Panel — 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

/* Square Kufic — made with TEXT-FX · https://text-fx.app
 * HTML: just put the class on any element.
 * 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: uppercase;
}

.text-effect {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 0.62em 0.85em;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0.05em 0.13em rgba(0, 0, 0, 0.5));
}
.text-effect .fx-glaze {
  position: absolute;
  inset: 0;
  padding: 0.62em 0.85em;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, hsl(15 54% 20%) 0, hsl(15 54% 20%) 0.026em, transparent 0.026em, transparent 0.165em), repeating-linear-gradient(0deg, hsl(15 54% 20%) 0, hsl(15 54% 20%) 0.026em, transparent 0.026em, transparent 0.165em), linear-gradient(178deg, hsl(15 62% 59%), hsl(15 62% 45%));
  background-origin: border-box;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.text-effect::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(90deg, hsl(26 30% 9.8%) 0, hsl(26 30% 9.8%) 0.026em, transparent 0.026em, transparent 0.165em), repeating-linear-gradient(0deg, hsl(26 30% 9.8%) 0, hsl(26 30% 9.8%) 0.026em, transparent 0.026em, transparent 0.165em), linear-gradient(178deg, hsl(26 24% 32%), hsl(26 24% 26%));
  background-origin: border-box;
  box-shadow: inset 0 0 0 0.165em hsl(26 32% 17%);
}

Pure CSS — just add the .text-effect class to any element.

Category
Fill & Texture
Type
Static
Browser support
background-clip:text + dual repeating-linear-gradient brick grid (all modern, -webkit- prefixed)
Capabilities
pure

Related Fill & Texture effects