# Canelado

Thin, subtle stripes, diagonal, horizontal or vertical, that add texture to the background of an area.

> Canelado is a THM Componentes component that fills an area with thin repeating stripes, diagonal by default, or horizontal or vertical. It is a static texture made with a single CSS gradient and no animation, which with its default color adapts on its own to light and dark mode and suits section backgrounds and frames.

- Category: Backgrounds and atmospheres
- Origin: Adapted from open source under the MIT license, with a ready THM prompt
- Load weight: Light: CSS or light JavaScript, no noticeable cost
- Technology: Vue 3, TypeScript, Tailwind CSS v4
- Interaction: None: the effect runs on its own
- URL: https://vibecode.thmtecnologia.com/en/components/canelado/

## What it looks like

It looks like the hatching in a technical drawing, those parallel lines that fill a cut-away area. One-pixel diagonal lines repeat in a pattern built from 10-pixel tiles, in a very faint color: near-black at 10% opacity in light mode and white at 10% in dark mode. Nothing moves. In the demo, narrow strips of this hatching run along the four sides of a portrait and fade out at the ends, like construction lines around a frame. Whatever you place inside the component sits on top of the texture.

## You may be looking for this if you asked for something like

- “a background with very subtle diagonal stripes”
- “a thin line texture behind a section so it does not look flat”
- “technical drawing style hatching around a card”
- “a subtle striped pattern that works in dark mode”
- “a line background that gives an engineering blueprint vibe”
- “those striped bands you see on developer tool websites”

## Also known as

diagonal stripes, hatch pattern, fine line texture, striped background, pinstripe texture, stripe pattern

## When to use

- Section backgrounds on SaaS and developer tool sites
- A hatched frame around cards, images or code blocks
- Empty areas and placeholders in layouts and prototypes
- A subtle texture to break up flat backgrounds without distraction

## When to avoid

- Behind small text, with a line color that is too strong
- When the page calls for motion, since Canelado is completely static

## How to ask your AI

```text
I want a CSS-only texture of thin diagonal stripes behind my feature sections and around the cards, with a subtle color taken from my brand tokens, automatic dark mode adjustment and one-pixel lines.
```

With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.

## Questions about Canelado

### Does Canelado animate or weigh the page down?

It does not animate. Canelado is a single repeating CSS gradient with no animation JavaScript, and THM Componentes rates it Light. Because it is static, it needs no reduced motion handling and can cover large areas, such as the background of a whole section.

### How do I change the stripe color and spacing in Canelado?

Canelado's color prop accepts any CSS color and replaces the default tone, which is near-black at 10% opacity in light mode and white at 10% in dark mode. The size prop sets each repeat in pixels, 10 by default, and orientation picks diagonal, horizontal or vertical.

### Where should I place Canelado on the page?

Canelado fills the full width and height of its parent element and puts the slot content on top of the texture. It works as the background of a whole section or, as in the demo, in narrow strips placed around a card, with a mask that fades out the ends.

## Related components

- [Treliça](https://vibecode.thmtecnologia.com/en/components/trelica/): A fine grid or dotted backdrop that fades at the edges and can slowly slide in one direction.
- [Amarelinha](https://vibecode.thmtecnologia.com/en/components/amarelinha/): A grid of thin lines where each square lights up as the mouse passes and fades slowly, leaving a trail.
- [Arranha-céu](https://vibecode.thmtecnologia.com/en/components/arranha-ceu/): A grid of tiny squares that light up and dim at random, at a slow pace, like an idle LED panel.
- [Ladrilho](https://vibecode.thmtecnologia.com/en/components/ladrilho/): A logo grid tilted in 3D where the logo under the mouse pops forward and glows green.
- [Escaninho](https://vibecode.thmtecnologia.com/en/components/escaninho/): A section split into blocks of different sizes, like a Japanese lunch box, to present features or services.

---
THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).