# Ruled Lines Pattern

> A notebook-style surface with evenly spaced horizontal rules.

- Kind: Element
- Page: https://ownlyplans.com/bhaskar/ruled-lines-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(180deg,transparent 0 31px,rgba(0,0,0,.09) 31px 32px),linear-gradient(#fff,#f3f3f3)}.bg span{position:relative}
```

## About

Horizontal ruled lines made from one repeating-linear-gradient, with a soft top-to-bottom fade.

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