UI-компоненти Легка

Striped Pattern

Beautiful diagonal or horizontal repeating stripes using CSS gradients with customizable colors, angle, and size via CSS custom properties.

Відкрити в Lab

css javascript vue svelte

Цілі: TS JS HTML React Vue Svelte

Код

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --stripe-angle: 135deg;
  --stripe-color-1: rgba(255, 255, 255, 0.04);
  --stripe-color-2: transparent;
  --stripe-size: 16px;
  --stripe-speed: 40s;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  background: #0a0a0a;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2rem);
}

.stripe-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.5rem;
  width: 100%;
  max-width: 1200px;
}

.stripe-card {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  min-height: 280px;
  display: flex;
  align-items: flex-end;
}

.stripe-bg {
  position: absolute;
  inset: 0;
  opacity: 1;
}

/* Diagonal stripes */
.stripe-diagonal {
  background: repeating-linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.08) 0px,
    rgba(139, 92, 246, 0.08) 1px,
    transparent 1px,
    transparent var(--stripe-size)
  );
  background-size: calc(var(--stripe-size) * 2.83) calc(var(--stripe-size) * 2.83);
  animation: stripe-drift var(--stripe-speed) linear infinite;
}

/* Horizontal stripes */
.stripe-horizontal {
  background: repeating-linear-gradient(
      0deg,
      rgba(56, 189, 248, 0.06) 0px,
      rgba(56, 189, 248, 0.06) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(168, 85, 247, 0.04) 0px,
      rgba(168, 85, 247, 0.04) 1px,
      transparent 1px,
      transparent 24px
    );
  animation: stripe-drift-vertical calc(var(--stripe-speed) * 0.8) linear infinite;
}

/* Crosshatch */
.stripe-crosshatch {
  background: repeating-linear-gradient(
      45deg,
      rgba(244, 63, 94, 0.06) 0px,
      rgba(244, 63, 94, 0.06) 1px,
      transparent 1px,
      transparent 20px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(251, 146, 60, 0.06) 0px,
      rgba(251, 146, 60, 0.06) 1px,
      transparent 1px,
      transparent 20px
    );
  animation: stripe-drift-cross var(--stripe-speed) linear infinite;
}

/* Fine neon stripes */
.stripe-fine {
  background: repeating-linear-gradient(
    135deg,
    rgba(34, 211, 238, 0.1) 0px,
    rgba(34, 211, 238, 0.1) 1px,
    transparent 1px,
    transparent 6px
  );
  background-size: 8.5px 8.5px;
  animation: stripe-drift calc(var(--stripe-speed) * 0.5) linear infinite;
}

.stripe-fine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 30%, rgba(34, 211, 238, 0.08), transparent 70%);
}

@keyframes stripe-drift {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 200px 200px;
  }
}

@keyframes stripe-drift-vertical {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 200px;
  }
}

@keyframes stripe-drift-cross {
  0% {
    background-position: 0 0, 0 0;
  }
  100% {
    background-position: 200px 200px, -200px 200px;
  }
}

.stripe-card-content {
  position: relative;
  z-index: 2;
  padding: 1.75rem;
  width: 100%;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.95) 0%,
    rgba(10, 10, 10, 0.7) 60%,
    transparent 100%
  );
}

.stripe-label {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(139, 92, 246, 0.9);
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}

.stripe-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: -0.02em;
  margin-bottom: 0.375rem;
}

.stripe-desc {
  font-size: 0.8125rem;
  color: rgba(148, 163, 184, 0.7);
  line-height: 1.5;
}

// Striped Pattern — optional interactivity: hover pauses animation, click cycles speed
(function () {
  "use strict";

  const cards = document.querySelectorAll(".stripe-card");
  if (!cards.length) return;

  const speeds = ["40s", "20s", "10s", "60s"];

  cards.forEach((card) => {
    let speedIndex = 0;
    const bg = card.querySelector(".stripe-bg");
    if (!bg) return;

    // Pause animation on hover for inspection
    card.addEventListener("mouseenter", () => {
      bg.style.animationPlayState = "paused";
    });

    card.addEventListener("mouseleave", () => {
      bg.style.animationPlayState = "running";
    });

    // Click to cycle through animation speeds
    card.addEventListener("click", () => {
      speedIndex = (speedIndex + 1) % speeds.length;
      bg.style.setProperty("--stripe-speed", speeds[speedIndex]);
      bg.style.animationDuration = speeds[speedIndex];
    });
  });

  // Subtle parallax: shift stripe position based on mouse position
  document.addEventListener("mousemove", (e) => {
    const x = (e.clientX / window.innerWidth - 0.5) * 10;
    const y = (e.clientY / window.innerHeight - 0.5) * 10;

    cards.forEach((card) => {
      const bg = card.querySelector(".stripe-bg");
      if (bg) {
        bg.style.transform = `translate(${x}px, ${y}px)`;
      }
    });
  });
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Striped Pattern</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="stripe-showcase">
    <!-- Pattern 1: Diagonal stripes -->
    <div class="stripe-card">
      <div class="stripe-bg stripe-diagonal"></div>
      <div class="stripe-card-content">
        <span class="stripe-label">Diagonal</span>
        <h2 class="stripe-title">135&deg; Stripes</h2>
        <p class="stripe-desc">Classic diagonal striped pattern with subtle animation</p>
      </div>
    </div>

    <!-- Pattern 2: Horizontal stripes -->
    <div class="stripe-card">
      <div class="stripe-bg stripe-horizontal"></div>
      <div class="stripe-card-content">
        <span class="stripe-label">Horizontal</span>
        <h2 class="stripe-title">0&deg; Stripes</h2>
        <p class="stripe-desc">Clean horizontal bands with dual-color layering</p>
      </div>
    </div>

    <!-- Pattern 3: Crosshatch -->
    <div class="stripe-card">
      <div class="stripe-bg stripe-crosshatch"></div>
      <div class="stripe-card-content">
        <span class="stripe-label">Crosshatch</span>
        <h2 class="stripe-title">Layered</h2>
        <p class="stripe-desc">Two diagonal gradients composited into a crosshatch</p>
      </div>
    </div>

    <!-- Pattern 4: Fine stripes with glow -->
    <div class="stripe-card">
      <div class="stripe-bg stripe-fine"></div>
      <div class="stripe-card-content">
        <span class="stripe-label">Fine</span>
        <h2 class="stripe-title">Thin Stripes</h2>
        <p class="stripe-desc">Narrow stripes with neon accent overlay</p>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

import { useMemo, type CSSProperties } from "react";

interface StripedPatternProps {
  angle?: number;
  color1?: string;
  color2?: string;
  stripeWidth?: number;
  animate?: boolean;
  animationDuration?: number;
  className?: string;
  style?: CSSProperties;
  children?: React.ReactNode;
}

export function StripedPattern({
  angle = 135,
  color1 = "rgba(139, 92, 246, 0.08)",
  color2 = "transparent",
  stripeWidth = 16,
  animate = true,
  animationDuration = 40,
  className = "",
  style,
  children,
}: StripedPatternProps) {
  const bgStyle = useMemo<CSSProperties>(() => {
    const radians = (angle * Math.PI) / 180;
    const hyp = stripeWidth * Math.sqrt(2);

    return {
      position: "absolute" as const,
      inset: 0,
      background: `repeating-linear-gradient(
        ${angle}deg,
        ${color1} 0px,
        ${color1} 1px,
        ${color2} 1px,
        ${color2} ${stripeWidth}px
      )`,
      backgroundSize: `${hyp}px ${hyp}px`,
      animation: animate ? `stripe-drift-react ${animationDuration}s linear infinite` : "none",
    };
  }, [angle, color1, color2, stripeWidth, animate, animationDuration]);

  return (
    <div
      className={className}
      style={{
        position: "relative",
        overflow: "hidden",
        ...style,
      }}
    >
      <style>{`
        @keyframes stripe-drift-react {
          0% { background-position: 0 0; }
          100% { background-position: 200px 200px; }
        }
      `}</style>
      <div style={bgStyle} aria-hidden="true" />
      {children && <div style={{ position: "relative", zIndex: 1 }}>{children}</div>}
    </div>
  );
}

// Pre-built variants
function DiagonalStripes() {
  return (
    <StripedPattern
      angle={135}
      color1="rgba(139, 92, 246, 0.08)"
      stripeWidth={16}
      style={{
        borderRadius: "1.25rem",
        minHeight: 280,
        border: "1px solid rgba(255,255,255,0.08)",
      }}
    >
      <div
        style={{
          padding: "1.75rem",
          marginTop: "auto",
          display: "flex",
          flexDirection: "column",
          justifyContent: "flex-end",
          minHeight: 280,
        }}
      >
        <span
          style={labelStyle(
            "rgba(139, 92, 246, 0.9)",
            "rgba(139, 92, 246, 0.1)",
            "rgba(139, 92, 246, 0.2)"
          )}
        >
          Diagonal
        </span>
        <h2 style={titleStyle}>135&deg; Stripes</h2>
        <p style={descStyle}>Classic diagonal striped pattern with subtle animation</p>
      </div>
    </StripedPattern>
  );
}

function HorizontalStripes() {
  return (
    <StripedPattern
      angle={0}
      color1="rgba(56, 189, 248, 0.06)"
      stripeWidth={12}
      style={{
        borderRadius: "1.25rem",
        minHeight: 280,
        border: "1px solid rgba(255,255,255,0.08)",
      }}
    >
      <div
        style={{
          padding: "1.75rem",
          display: "flex",
          flexDirection: "column",
          justifyContent: "flex-end",
          minHeight: 280,
        }}
      >
        <span
          style={labelStyle(
            "rgba(56, 189, 248, 0.9)",
            "rgba(56, 189, 248, 0.1)",
            "rgba(56, 189, 248, 0.2)"
          )}
        >
          Horizontal
        </span>
        <h2 style={titleStyle}>0&deg; Stripes</h2>
        <p style={descStyle}>Clean horizontal bands with dual-color layering</p>
      </div>
    </StripedPattern>
  );
}

function FineStripes() {
  return (
    <StripedPattern
      angle={135}
      color1="rgba(34, 211, 238, 0.1)"
      stripeWidth={6}
      animationDuration={20}
      style={{
        borderRadius: "1.25rem",
        minHeight: 280,
        border: "1px solid rgba(255,255,255,0.08)",
      }}
    >
      <div
        style={{
          padding: "1.75rem",
          display: "flex",
          flexDirection: "column",
          justifyContent: "flex-end",
          minHeight: 280,
        }}
      >
        <span
          style={labelStyle(
            "rgba(34, 211, 238, 0.9)",
            "rgba(34, 211, 238, 0.1)",
            "rgba(34, 211, 238, 0.2)"
          )}
        >
          Fine
        </span>
        <h2 style={titleStyle}>Thin Stripes</h2>
        <p style={descStyle}>Narrow stripes with neon accent overlay</p>
      </div>
    </StripedPattern>
  );
}

function CrosshatchStripes() {
  return (
    <div
      style={{
        position: "relative",
        borderRadius: "1.25rem",
        overflow: "hidden",
        minHeight: 280,
        border: "1px solid rgba(255,255,255,0.08)",
        background: "rgba(255,255,255,0.02)",
      }}
    >
      <style>{`
        @keyframes stripe-cross-react {
          0% { background-position: 0 0, 0 0; }
          100% { background-position: 200px 200px, -200px 200px; }
        }
      `}</style>
      <div
        aria-hidden="true"
        style={{
          position: "absolute",
          inset: 0,
          background: `
            repeating-linear-gradient(45deg, rgba(244,63,94,0.06) 0px, rgba(244,63,94,0.06) 1px, transparent 1px, transparent 20px),
            repeating-linear-gradient(-45deg, rgba(251,146,60,0.06) 0px, rgba(251,146,60,0.06) 1px, transparent 1px, transparent 20px)
          `,
          animation: "stripe-cross-react 40s linear infinite",
        }}
      />
      <div
        style={{
          position: "relative",
          zIndex: 1,
          padding: "1.75rem",
          display: "flex",
          flexDirection: "column",
          justifyContent: "flex-end",
          minHeight: 280,
        }}
      >
        <span
          style={labelStyle(
            "rgba(244, 63, 94, 0.9)",
            "rgba(244, 63, 94, 0.1)",
            "rgba(244, 63, 94, 0.2)"
          )}
        >
          Crosshatch
        </span>
        <h2 style={titleStyle}>Layered</h2>
        <p style={descStyle}>Two diagonal gradients composited into a crosshatch</p>
      </div>
    </div>
  );
}

// Shared styles
const labelStyle = (color: string, bg: string, border: string): CSSProperties => ({
  display: "inline-block",
  alignSelf: "flex-start",
  fontSize: "0.6875rem",
  fontWeight: 600,
  textTransform: "uppercase",
  letterSpacing: "0.1em",
  color,
  background: bg,
  border: `1px solid ${border}`,
  padding: "0.2rem 0.6rem",
  borderRadius: 999,
  marginBottom: "0.75rem",
});

const titleStyle: CSSProperties = {
  fontSize: "1.25rem",
  fontWeight: 700,
  color: "#f1f5f9",
  letterSpacing: "-0.02em",
  marginBottom: "0.375rem",
};

const descStyle: CSSProperties = {
  fontSize: "0.8125rem",
  color: "rgba(148, 163, 184, 0.7)",
  lineHeight: 1.5,
};

// Demo usage
export default function StripedPatternDemo() {
  return (
    <div
      style={{
        minHeight: "100vh",
        background: "#0a0a0a",
        padding: "1.5rem",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        fontFamily: "system-ui, -apple-system, sans-serif",
      }}
    >
      <style>{`
        .stripe-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 1.5rem;
          width: 100%;
          max-width: 1200px;
        }
        @media (max-width: 768px) {
          .stripe-grid {
            grid-template-columns: 1fr;
          }
        }
      `}</style>
      <div className="stripe-grid">
        <DiagonalStripes />
        <HorizontalStripes />
        <CrosshatchStripes />
        <FineStripes />
      </div>
    </div>
  );
}

<script setup>
function labelStyle(color, bg, border) {
  return {
    display: "inline-block",
    alignSelf: "flex-start",
    fontSize: "0.6875rem",
    fontWeight: 600,
    textTransform: "uppercase",
    letterSpacing: "0.1em",
    color,
    background: bg,
    border: `1px solid ${border}`,
    padding: "0.2rem 0.6rem",
    borderRadius: "999px",
    marginBottom: "0.75rem",
  };
}

const patterns = [
  {
    cls: "stripe-diagonal",
    labelColor: "rgba(139,92,246,0.9)",
    labelBg: "rgba(139,92,246,0.1)",
    labelBorder: "rgba(139,92,246,0.2)",
    badge: "Diagonal",
    title: "135\u00b0 Stripes",
    desc: "Classic diagonal striped pattern with subtle animation",
  },
  {
    cls: "stripe-horizontal",
    labelColor: "rgba(56,189,248,0.9)",
    labelBg: "rgba(56,189,248,0.1)",
    labelBorder: "rgba(56,189,248,0.2)",
    badge: "Horizontal",
    title: "0\u00b0 Stripes",
    desc: "Clean horizontal bands with dual-color layering",
  },
  {
    cls: "stripe-crosshatch",
    labelColor: "rgba(244,63,94,0.9)",
    labelBg: "rgba(244,63,94,0.1)",
    labelBorder: "rgba(244,63,94,0.2)",
    badge: "Crosshatch",
    title: "Layered",
    desc: "Two diagonal gradients composited into a crosshatch",
  },
  {
    cls: "stripe-fine",
    labelColor: "rgba(34,211,238,0.9)",
    labelBg: "rgba(34,211,238,0.1)",
    labelBorder: "rgba(34,211,238,0.2)",
    badge: "Fine",
    title: "Thin Stripes",
    desc: "Narrow stripes with neon accent overlay",
  },
];
</script>

<template>
  <div class="root">
    <div class="grid">
      <div v-for="p in patterns" :key="p.cls" class="pattern-card">
        <div :class="['stripe-bg', p.cls]" aria-hidden="true" />
        <div class="content content-end">
          <span :style="labelStyle(p.labelColor, p.labelBg, p.labelBorder)">{{ p.badge }}</span>
          <h2 class="title">{{ p.title }}</h2>
          <p class="desc">{{ p.desc }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.root {
  min-height: 100vh;
  background: #0a0a0a;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, sans-serif;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  width: 100%;
  max-width: 1200px;
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

.pattern-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  min-height: 280px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.stripe-bg {
  position: absolute;
  inset: 0;
}

.stripe-diagonal {
  background: repeating-linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.08) 0px,
    rgba(139, 92, 246, 0.08) 1px,
    transparent 1px,
    transparent 16px
  );
  background-size: 22.63px 22.63px;
  animation: stripe-drift 40s linear infinite;
}

.stripe-horizontal {
  background: repeating-linear-gradient(
    0deg,
    rgba(56, 189, 248, 0.06) 0px,
    rgba(56, 189, 248, 0.06) 1px,
    transparent 1px,
    transparent 12px
  );
  background-size: 16.97px 16.97px;
  animation: stripe-drift 40s linear infinite;
}

.stripe-crosshatch {
  background:
    repeating-linear-gradient(45deg, rgba(244, 63, 94, 0.06) 0px, rgba(244, 63, 94, 0.06) 1px, transparent 1px, transparent 20px),
    repeating-linear-gradient(-45deg, rgba(251, 146, 60, 0.06) 0px, rgba(251, 146, 60, 0.06) 1px, transparent 1px, transparent 20px);
  animation: stripe-cross 40s linear infinite;
}

.stripe-fine {
  background: repeating-linear-gradient(
    135deg,
    rgba(34, 211, 238, 0.1) 0px,
    rgba(34, 211, 238, 0.1) 1px,
    transparent 1px,
    transparent 6px
  );
  background-size: 8.49px 8.49px;
  animation: stripe-drift 20s linear infinite;
}

.content {
  position: relative;
  z-index: 1;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}

.content-end {
  justify-content: flex-end;
  min-height: 280px;
}

.title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: -0.02em;
  margin: 0 0 0.375rem;
}

.desc {
  font-size: 0.8125rem;
  color: rgba(148, 163, 184, 0.7);
  line-height: 1.5;
  margin: 0;
}

@keyframes stripe-drift {
  0% { background-position: 0 0; }
  100% { background-position: 200px 200px; }
}

@keyframes stripe-cross {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 200px 200px, -200px 200px; }
}
</style>

<script>
function labelStyle(color, bg, border) {
  return `display:inline-block;align-self:flex-start;font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:${color};background:${bg};border:1px solid ${border};padding:0.2rem 0.6rem;border-radius:999px;margin-bottom:0.75rem;`;
}
</script>

<div class="root">
  <div class="grid">
    <!-- Diagonal Stripes -->
    <div class="pattern-card">
      <div class="stripe-bg stripe-diagonal" aria-hidden="true" />
      <div class="content content-end">
        <span style={labelStyle("rgba(139,92,246,0.9)", "rgba(139,92,246,0.1)", "rgba(139,92,246,0.2)")}>Diagonal</span>
        <h2 class="title">135&deg; Stripes</h2>
        <p class="desc">Classic diagonal striped pattern with subtle animation</p>
      </div>
    </div>

    <!-- Horizontal Stripes -->
    <div class="pattern-card">
      <div class="stripe-bg stripe-horizontal" aria-hidden="true" />
      <div class="content content-end">
        <span style={labelStyle("rgba(56,189,248,0.9)", "rgba(56,189,248,0.1)", "rgba(56,189,248,0.2)")}>Horizontal</span>
        <h2 class="title">0&deg; Stripes</h2>
        <p class="desc">Clean horizontal bands with dual-color layering</p>
      </div>
    </div>

    <!-- Crosshatch Stripes -->
    <div class="pattern-card">
      <div class="stripe-bg stripe-crosshatch" aria-hidden="true" />
      <div class="content content-end">
        <span style={labelStyle("rgba(244,63,94,0.9)", "rgba(244,63,94,0.1)", "rgba(244,63,94,0.2)")}>Crosshatch</span>
        <h2 class="title">Layered</h2>
        <p class="desc">Two diagonal gradients composited into a crosshatch</p>
      </div>
    </div>

    <!-- Fine Stripes -->
    <div class="pattern-card">
      <div class="stripe-bg stripe-fine" aria-hidden="true" />
      <div class="content content-end">
        <span style={labelStyle("rgba(34,211,238,0.9)", "rgba(34,211,238,0.1)", "rgba(34,211,238,0.2)")}>Fine</span>
        <h2 class="title">Thin Stripes</h2>
        <p class="desc">Narrow stripes with neon accent overlay</p>
      </div>
    </div>
  </div>
</div>

<style>
  .root {
    min-height: 100vh;
    background: #0a0a0a;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: system-ui, -apple-system, sans-serif;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    width: 100%;
    max-width: 1200px;
  }

  @media (max-width: 768px) {
    .grid {
      grid-template-columns: 1fr;
    }
  }

  .pattern-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    min-height: 280px;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .stripe-bg {
    position: absolute;
    inset: 0;
  }

  .stripe-diagonal {
    background: repeating-linear-gradient(
      135deg,
      rgba(139, 92, 246, 0.08) 0px,
      rgba(139, 92, 246, 0.08) 1px,
      transparent 1px,
      transparent 16px
    );
    background-size: 22.63px 22.63px;
    animation: stripe-drift 40s linear infinite;
  }

  .stripe-horizontal {
    background: repeating-linear-gradient(
      0deg,
      rgba(56, 189, 248, 0.06) 0px,
      rgba(56, 189, 248, 0.06) 1px,
      transparent 1px,
      transparent 12px
    );
    background-size: 16.97px 16.97px;
    animation: stripe-drift 40s linear infinite;
  }

  .stripe-crosshatch {
    background:
      repeating-linear-gradient(45deg, rgba(244, 63, 94, 0.06) 0px, rgba(244, 63, 94, 0.06) 1px, transparent 1px, transparent 20px),
      repeating-linear-gradient(-45deg, rgba(251, 146, 60, 0.06) 0px, rgba(251, 146, 60, 0.06) 1px, transparent 1px, transparent 20px);
    animation: stripe-cross 40s linear infinite;
  }

  .stripe-fine {
    background: repeating-linear-gradient(
      135deg,
      rgba(34, 211, 238, 0.1) 0px,
      rgba(34, 211, 238, 0.1) 1px,
      transparent 1px,
      transparent 6px
    );
    background-size: 8.49px 8.49px;
    animation: stripe-drift 20s linear infinite;
  }

  .content {
    position: relative;
    z-index: 1;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
  }

  .content-end {
    justify-content: flex-end;
    min-height: 280px;
  }

  .title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: -0.02em;
    margin: 0 0 0.375rem;
  }

  .desc {
    font-size: 0.8125rem;
    color: rgba(148, 163, 184, 0.7);
    line-height: 1.5;
    margin: 0;
  }

  @keyframes stripe-drift {
    0% { background-position: 0 0; }
    100% { background-position: 200px 200px; }
  }

  @keyframes stripe-cross {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 200px 200px, -200px 200px; }
  }
</style>

Striped Pattern

Elegant repeating stripes using CSS repeating-linear-gradient. Fully customizable via CSS custom properties for angle, color, size, and opacity.

How it works

repeating-linear-gradient creates seamless diagonal or horizontal stripes
CSS custom properties (--stripe-angle, --stripe-color, --stripe-size) allow dynamic theming
A subtle animated drift can be enabled for a living background effect
Multiple stripe layers can be composited for richer patterns

Customization

--stripe-angle: Direction of stripes (default 135deg for diagonal)
--stripe-color-1 / --stripe-color-2: Alternating stripe colors
--stripe-size: Width of each stripe band
Optional slow CSS animation drifts the pattern continuously

When to use it

Section backgrounds and dividers
Card background textures
Loading state placeholder patterns
Decorative hero overlays