パーツ番号 07-02-06 ・ CSSのみ

ノイズ/グレイン風テクスチャ

SVGのfeTurbulenceで生成したザラつきを重ねた、フィルム風グレイン背景です。WordPressで質感のあるレトロ・アナログな雰囲気を演出できます。

csssvg

プレビュー

ソースコード

HTML

<span class="d07-02-06-label">背景サンプル</span>

CSS

.d07-02-06{padding:0;background:linear-gradient(135deg,#2b2140,#402b4f)}
        .d07-02-06-label{position:relative;z-index:2;color:#fff;font-weight:700;letter-spacing:.08em;font-size:15px}
        .d07-02-06::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;mix-blend-mode:overlay;
          background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
          animation:d166grain .5s steps(3) infinite}
        @keyframes d166grain{0%{transform:translate(0,0)}33%{transform:translate(-4%,3%)}66%{transform:translate(3%,-4%)}100%{transform:translate(0,0)}}

クラス名 .d07-02-06 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。