# Reverse Diagonal Hatch Pattern

> A white surface with fine grey hatch lines running the opposite way, bottom-left to top-right.

- Kind: Element
- Page: https://ownlyplans.com/bhaskar/reverse-diagonal-hatch-pattern/
- Licence: MIT (do anything, keep the notice)

## Code

`index.html`

```html
<div class='bg'><span>Your content</span></div>
```

`styles.css`

```css
.bg{display:grid;place-items:center;width:100%;min-height:260px;position:relative;font:400 20px Georgia,serif;color:#1c1c1c;background:repeating-linear-gradient(-45deg,rgba(0,0,0,.05) 0 1px,transparent 1px 8px),#fff}.bg span{position:relative}
```

## About

Mirror of the diagonal hatch: a repeating-linear-gradient at -45 degrees, one CSS declaration.

---
Also available as JSON: https://ownlyplans.com/bhaskar/reverse-diagonal-hatch-pattern/?format=json
MCP server: https://ownlyplans.com/mcp