decorative lines topographic background contour hero or promo backgrounds in Tailwind landing pages editorial callouts with a technical or map-like accent subtle diagrammatic texture on cards and empty states flat surfaces need more atmosphere than a plain gradient grid and dot patterns can feel too mechanical want a softer graphic background treatment without images
Topographic Lines
Fetch snippet JSON:
curl https://webspire.de/snippets/decorative/topographic-lines.json A softer, more atmospheric pattern than grids or dots.
Background
Customize
Quick Start
<section class="topographic-lines relative overflow-hidden rounded-[2rem] border border-white/10 bg-slate-950/80 p-8 text-white">...</section>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Size
- 756 bytes · 33 lines
- Custom Properties
-
--topographic-line-color--topographic-line-gap - Classes
-
.topographic-lines
decorative lines topographic background contour
A quieter alternative to grids and dots. The contour-like lines give surfaces a more atmospheric, slightly technical feel without overpowering the content.