HTML + CSSHintergründe

Diagonale Lichtlinien

Feine diagonale Streifen gleiten über den Bildschirm, während ein Lichtband darüber hinwegzieht.

Einstellungen

1x
1x
1

Code

<div class="pt-diag"><i></i><b></b><b></b></div>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Mehr aus Hintergründe

Wofür du ihn nutzen kannst

Diagonale Linien bringen Bewegung ins Bild, ohne es vollzustopfen. Sie machen sich gut hinter dem Preisbereich einer Fintech-Seite, auf dem Login-Screen eines internen Dashboards oder als Titelbild einer Case Study. Das wandernde Licht gibt der Seite einen dezenten Glanz. Ein animierter Streifen-Hintergrund in CSS, der kaum Ladezeit kostet.

Soll darauf längerer Text stehen, halte die Linien zart, denn feine Streifen können auf manchen Displays flimmern. Der Skalierungsregler ändert den Abstand: Mit viel Luft wirkt es grafischer, eng gesetzt fast wie eine Textur.