Terrazzo

Fill & Texture · Static · pure CSS

A polished terrazzo-floor fill: small angular stone chips in marble white, ochre, rust, sage and charcoal scatter across a neutral cement base, each a jagged flat-color polygon with bare matrix showing between them. Base tone, chip size, chip density and palette warmth tune the aggregate from a sparse cool slab to a dense warm cream terrazzo — static, discrete multi-hue chips, not veins or dots.

Open in the generator →All effects
Terrazzo

How it works

Terrazzo 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

Terrazzo exposes 4 dedicated controls — Base Tone, Chip Size, Chip Density and Palette Warmth — 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

/* Terrazzo — made with TEXT-FX · https://text-fx.app
 * HTML: just put the class on any element.
 * Font: 'Major Mono Display', monospace (load from Google Fonts).
 */

.text-effect {
  font-family: 'Major Mono Display', monospace;
  font-weight: 700;
  letter-spacing: -2px;
  text-transform: none;
}

.text-effect {
  background-image:
    linear-gradient(165deg, hsl(0 0% 100% / 0.03) 0%, transparent 30%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'142.2'%20height%3D'142.2'%20viewBox%3D'0%200%20142.2%20142.2'%3E%3Cpolygon%20points%3D'46.8%2C89.2%2053.5%2C79.4%2063.1%2C86.2%2056.4%2C95.3'%20fill%3D'hsl(36.6%2C76.1%25%2C73%25)'%20stroke%3D'hsl(36.6%2C76.1%25%2C59%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'93%2C123.3%20105.7%2C119.4%20112.5%2C129.8%20108.6%2C139.3%2098.1%2C146.3%2090.1%2C135.5'%20fill%3D'hsl(42%2C10%25%2C88%25)'%20stroke%3D'hsl(42%2C10%25%2C74%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'134%2C112.2%20123.4%2C112.1%20117.7%2C104%20125.1%2C96.1%20134.2%2C101.2'%20fill%3D'hsl(36.6%2C76.1%25%2C73%25)'%20stroke%3D'hsl(36.6%2C76.1%25%2C59%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'46.7%2C47.1%2031.5%2C43.1%2022.6%2C30.3%2034.5%2C21.3%2049.2%2C17.5%2049.4%2C32.5'%20fill%3D'hsl(89%2C33.6%25%2C68%25)'%20stroke%3D'hsl(89%2C33.6%25%2C54%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'117.8%2C85.5%20108.7%2C98.3%2095%2C90.8%2096.7%2C76.9%20111.3%2C70.6'%20fill%3D'hsl(36.6%2C76.1%25%2C73%25)'%20stroke%3D'hsl(36.6%2C76.1%25%2C59%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'100.7%2C100.3%20116.5%2C97.1%20127.9%2C113.1%20105.4%2C120.8'%20fill%3D'hsl(36.6%2C76.1%25%2C73%25)'%20stroke%3D'hsl(36.6%2C76.1%25%2C59%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'66.9%2C23%2072.7%2C36.1%2060.2%2C41.9%2049.5%2C39.9%2043.7%2C27.9%2054.3%2C18.5'%20fill%3D'hsl(222%2C14%25%2C8%25)'%20stroke%3D'hsl(222%2C14%25%2C4%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'6.9%2C24.3%20-0.3%2C11.7%207.7%2C1.4%2020.6%2C-2.1%2024.4%2C10.5%2019.5%2C19.9'%20fill%3D'hsl(9.9%2C76.1%25%2C65%25)'%20stroke%3D'hsl(9.9%2C76.1%25%2C51%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'48.8%2C120.9%2061.9%2C117.5%2070.9%2C128.5%2056.1%2C134.6'%20fill%3D'hsl(89%2C33.6%25%2C68%25)'%20stroke%3D'hsl(89%2C33.6%25%2C54%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'88.8%2C129.6%2089%2C140.7%2074.9%2C144.8%2076.7%2C129.3'%20fill%3D'hsl(42%2C10%25%2C88%25)'%20stroke%3D'hsl(42%2C10%25%2C74%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'104.9%2C45.2%2095.8%2C42.8%2095.5%2C32.9%20103.4%2C26.8%20110.9%2C32.3%20116.2%2C42.7'%20fill%3D'hsl(222%2C14%25%2C8%25)'%20stroke%3D'hsl(222%2C14%25%2C4%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'5.6%2C59.6%203.4%2C47.4%2015%2C46.7%2025.4%2C53.3%2016.8%2C63.9'%20fill%3D'hsl(9.9%2C76.1%25%2C65%25)'%20stroke%3D'hsl(9.9%2C76.1%25%2C51%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'73.4%2C19.1%2087.6%2C24.2%2096.3%2C38.5%2079.3%2C48.7%2067%2C34.9'%20fill%3D'hsl(222%2C14%25%2C8%25)'%20stroke%3D'hsl(222%2C14%25%2C4%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'50.9%2C78.8%2042.4%2C92.9%2026.7%2C89%2026.6%2C74.1%2039.1%2C69.9'%20fill%3D'hsl(42%2C10%25%2C88%25)'%20stroke%3D'hsl(42%2C10%25%2C74%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'33.3%2C92.1%2047.2%2C102.7%2041.2%2C114.9%2028.9%2C119.1%2021.7%2C105.4'%20fill%3D'hsl(9.9%2C76.1%25%2C65%25)'%20stroke%3D'hsl(9.9%2C76.1%25%2C51%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'60%2C32.3%2046.8%2C17.6%2051.6%2C-1.8%2070.9%2C2.7%2074%2C19.1'%20fill%3D'hsl(42%2C10%25%2C88%25)'%20stroke%3D'hsl(42%2C10%25%2C74%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'-0.5%2C131.8%200.3%2C119.9%2014.3%2C117.5%2022.8%2C129.4%2016.7%2C142.5%202.1%2C144.8'%20fill%3D'hsl(42%2C10%25%2C88%25)'%20stroke%3D'hsl(42%2C10%25%2C74%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'3.3%2C80.3%2014.9%2C68.1%2031%2C77.5%2017.1%2C90.3'%20fill%3D'hsl(222%2C14%25%2C8%25)'%20stroke%3D'hsl(222%2C14%25%2C4%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'72%2C50.8%2083.6%2C51.9%2094.9%2C57.5%2087.6%2C68%2076.4%2C74.3%2066.7%2C63.5'%20fill%3D'hsl(222%2C14%25%2C8%25)'%20stroke%3D'hsl(222%2C14%25%2C4%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'98.9%2C94.6%2098.7%2C110%2084.9%2C115.8%2071.2%2C109.2%2075.5%2C95.5%2085.9%2C86.8'%20fill%3D'hsl(222%2C14%25%2C8%25)'%20stroke%3D'hsl(222%2C14%25%2C4%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'36.9%2C30.8%2022.3%2C24.1%2018.8%2C6%2039%2C-0.1%2044.9%2C17.3'%20fill%3D'hsl(89%2C33.6%25%2C68%25)'%20stroke%3D'hsl(89%2C33.6%25%2C54%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'107.4%2C14%2091.9%2C14.7%2097.4%2C-0.1%20109.1%2C2.6'%20fill%3D'hsl(42%2C10%25%2C88%25)'%20stroke%3D'hsl(42%2C10%25%2C74%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'0.6%2C36.5%207%2C18.7%2026.2%2C23.7%2018.3%2C41.4'%20fill%3D'hsl(42%2C10%25%2C88%25)'%20stroke%3D'hsl(42%2C10%25%2C74%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'150.4%2C79.2%20140.1%2C95.7%20120.2%2C88.7%20127.3%2C72.4%20141.3%2C61.9'%20fill%3D'hsl(36.6%2C76.1%25%2C73%25)'%20stroke%3D'hsl(36.6%2C76.1%25%2C59%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'43.9%2C64.2%2032.4%2C61.4%2029%2C52.4%2036.9%2C46.2%2044.6%2C52.4'%20fill%3D'hsl(89%2C33.6%25%2C68%25)'%20stroke%3D'hsl(89%2C33.6%25%2C54%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'101.8%2C55.2%20112.9%2C55.7%20115.3%2C66.5%20108.9%2C74.6%20100.2%2C70.9%2097.8%2C63.5'%20fill%3D'hsl(42%2C10%25%2C88%25)'%20stroke%3D'hsl(42%2C10%25%2C74%25)'%20stroke-width%3D'0.9'%2F%3E%3Cpolygon%20points%3D'27.5%2C128.1%2035.9%2C123.3%2043.4%2C130.2%2044.2%2C142.1%2032.3%2C143.8%2021.6%2C138.1'%20fill%3D'hsl(9.9%2C76.1%25%2C65%25)'%20stroke%3D'hsl(9.9%2C76.1%25%2C51%25)'%20stroke-width%3D'0.9'%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(178deg, hsl(36 6% 48%) 0%, hsl(36 6% 34%) 55%, hsl(36 6% 22%) 100%);
  background-size: 100% 100%, 142.2px 142.2px, 100% 100%;
  background-repeat: no-repeat, repeat, no-repeat;
  background-position: 0 0, 0 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 3px hsl(220 20% 6% / 0.5));
}

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

Category
Fill & Texture
Type
Static
Browser support
background-clip:text cement base + repeating data-URI SVG chip-tile background
Capabilities
pure

Related Fill & Texture effects