Textura

Warum wir das Tool gebaut haben

In vielen Projekten wollten wir leichte, elegante Hintergründe einsetzen – ein feines Raster, subtile Punkte oder ein dezentes Linienmuster. Doch oft endete dieser Wunsch entweder in externen Bilddateien oder in komplexem SVG-Code. Das war uns zu aufwendig, zu unflexibel und vor allem nicht performant genug.

Textura ist aus dem Wunsch entstanden, solche Patterns direkt mit CSS zu erzeugen – ohne zusätzliche Dateien, ohne hohe Ladezeiten. Denn CSS bietet erstaunlich viele Möglichkeiten, um grafische Muster zu generieren – man muss sie nur geschickt kombinieren. Unser Ziel war es, diese Möglichkeiten in ein intuitives Werkzeug zu übersetzen, das Design und Code zusammenbringt.

Wir wollten ein Tool schaffen, das sowohl für Design-Experimente als auch für den produktiven Einsatz taugt – schnell, flexibel und mit direkter Kontrolle über das visuelle Ergebnis.

Wieso das Tool wichtig bzw. praktisch ist

Patterns sind ein wirkungsvolles Gestaltungselement: Sie bringen Struktur in Flächen, schaffen visuelle Tiefe und können gezielt Aufmerksamkeit lenken. Gleichzeitig sollen moderne Websites leicht und performant sein – und genau da liegt oft der Konflikt: Bilder blähen das Projekt auf, SVGs sind nicht immer leicht anpassbar, und die manuelle Erstellung mit CSS ist aufwendig.

Textura schliesst diese Lücke. Das Tool macht es einfach, wiederholende Muster direkt mit CSS zu erzeugen – ganz ohne externe Ressourcen. Dadurch bleiben Seiten schlank und schnell, was besonders bei responsiven Layouts, Mobile-First-Ansätzen oder Performance-getriebenen Projekten wichtig ist.

Ausserdem bringt Textura eine neue Ebene von Kontrolle: Du entscheidest über Grösse, Abstand, Farben und sogar die Deckkraft des Musters. Damit wird aus einem simplen Hintergrund ein feines Designelement, das Charakter zeigt, ohne sich in den Vordergrund zu drängen. Der gepunktete Hintergrund im Header dieser Seite kommt übrigens auch von Textura.

Wie das Tool funktioniert

Textura bietet dir eine Auswahl an fünf verschiedenen Pattern-Arten:

• Vertikale Linien
• Horizontale Linien
• Dots (Punkte)
• Grid (Raster)
• Concentric Circles (Kreise)

Du wählst einfach ein Muster aus und passt es über interaktive Regler an: die Grösse der Elemente, das Spacing zwischen ihnen, die Hintergrundfarbe, die Farbe des Musters sowie dessen Deckkraft. Alle Änderungen wirken sich sofort auf die Vorschau aus, sodass du dein Design in Echtzeit abstimmen kannst.

Im Hintergrund erzeugt Textura daraus ein vollständiges CSS-Background-Pattern, das du mit einem Klick kopieren kannst. Der Code basiert auf background-image mit repeating-linear-gradient, radial-gradient oder clever kombinierten CSS-Tricks – alles ready-to-use, ohne Abhängigkeiten oder Zusätze.

So wird aus einer Idee in Sekunden ein umsetzbarer, skalierbarer Hintergrund – und du behältst jederzeit die volle Kontrolle.