Diagonal light lines
Thin diagonal stripes slide across the screen while a band of light sweeps over them.
Settings
Code
<div class="pt-diag"><i></i><b></b><b></b></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Backgrounds
Where to use it
Diagonal lines bring a sense of motion without adding clutter. They look good behind the pricing section of a fintech site, on the login screen of an internal dashboard or as the cover of a case study. The passing light gives the page a subtle shine. A clean animated stripes background in CSS that barely weighs anything.
Keep the lines faint if people will read long text over them, since fine stripes can shimmer on some screens. The scale slider changes the gap between lines: wide gaps look more graphic, tight ones read almost like a texture.