本文へスキップ

CRG-06 — BACKGROUNDS

背景パターン25点 在庫あり

ドット・格子・ストライプ。画像なしの床材。 すべて画像不使用・クラス接頭辞 cg- 付きで、既存サイトに安全に積み込めます。

CRG-06-001

水玉ドットPolka Dots

.cg-bg-dots {
  width: 220px;
  height: 120px;
  border-radius: 10px;
  background-color: #FBF4EA;
  background-image: radial-gradient(#C89B6C 2px, transparent 2px);
  background-size: 18px 18px;
}
<div class="cg-bg-dots"></div>
GROSS WT. 227 B ORIGINAL
CRG-06-002

方眼グリッドGrid Paper

.cg-bg-grid {
  width: 220px;
  height: 120px;
  border-radius: 10px;
  background-color: #F7F6F2;
  background-image:
    linear-gradient(rgba(58, 90, 120, .25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58, 90, 120, .25) 1px, transparent 1px);
  background-size: 20px 20px;
}
<div class="cg-bg-grid"></div>
GROSS WT. 319 B ORIGINAL
CRG-06-003

ピンストライプPinstripes

.cg-bg-pin {
  width: 220px;
  height: 120px;
  border-radius: 10px;
  background: repeating-linear-gradient(
    90deg,
    #F7F6F2 0 10px,
    #ECE8DE 10px 12px
  );
}
<div class="cg-bg-pin"></div>
GROSS WT. 198 B ORIGINAL
CRG-06-004

ギンガムチェックGingham Check

.cg-bg-check {
  width: 220px;
  height: 120px;
  border-radius: 10px;
  background-color: #fff;
  background-image:
    linear-gradient(rgba(232, 89, 12, .28) 50%, transparent 50%),
    linear-gradient(90deg, rgba(232, 89, 12, .28) 50%, transparent 50%);
  background-size: 24px 24px;
}
<div class="cg-bg-check"></div>
GROSS WT. 318 B ORIGINAL
CRG-06-005

ハザードストライプHazard Stripes

.cg-bg-hazard {
  width: 220px;
  height: 46px;
  border-radius: 6px;
  background: repeating-linear-gradient(
    -45deg,
    #F2B707 0 16px,
    #1B1A17 16px 32px
  );
}
<div class="cg-bg-hazard"></div>
GROSS WT. 203 B ORIGINAL
CRG-06-006

ノイズテクスチャNoise Grain

.cg-bg-noise {
  width: 220px;
  height: 120px;
  border-radius: 10px;
  background-color: #E9E7E0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}
<div class="cg-bg-noise"></div>
GROSS WT. 433 B ORIGINAL
CRG-06-007

波形セクション境界Wave Divider BG

.cg-bg-wave {
  width: 220px;
  height: 120px;
  border-radius: 10px;
  background: #3A5A78;
  -webkit-mask: radial-gradient(18px at 50% calc(100% + 10px), transparent 96%, #000) 50% / 44px 100%;
  mask: radial-gradient(18px at 50% calc(100% + 10px), transparent 96%, #000) 50% / 44px 100%;
}
<div class="cg-bg-wave"></div>
GROSS WT. 322 B ORIGINAL
CRG-06-008

ブループリントBlueprint

.cg-bg-blueprint {
  width: 220px;
  height: 120px;
  border-radius: 10px;
  background-color: #1E3247;
  background-image:
    linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
}
<div class="cg-bg-blueprint"></div>
GROSS WT. 509 B ORIGINAL
CRG-06-009

ダイヤタイルDiamond Tiles

.cg-bg-diamond {
  width: 220px;
  height: 120px;
  border-radius: 10px;
  background-color: #F7F6F2;
  background-image:
    linear-gradient(45deg, #E5E1D6 25%, transparent 25%, transparent 75%, #E5E1D6 75%),
    linear-gradient(45deg, #E5E1D6 25%, transparent 25%, transparent 75%, #E5E1D6 75%);
  background-position: 0 0, 14px 14px;
  background-size: 28px 28px;
}
<div class="cg-bg-diamond"></div>
GROSS WT. 401 B ORIGINAL
CRG-06-010

オーロラぼかしAurora Blur

.cg-bg-aurora {
  width: 220px;
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: #14130F;
}
.cg-bg-aurora::before,
.cg-bg-aurora::after {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  filter: blur(34px);
  opacity: .75;
}
.cg-bg-aurora::before {
  background: #3A5A78;
  top: -50px;
  left: -20px;
  animation: cg-bg-aurora-a 6s ease-in-out infinite alternate;
}
.cg-bg-aurora::after {
  background: #E8590C;
  bottom: -60px;
  right: -20px;
  animation: cg-bg-aurora-a 7s ease-in-out infinite alternate-reverse;
}
@keyframes cg-bg-aurora-a { to { transform: translate(30px, 16px) scale(1.15); } }
<div class="cg-bg-aurora"></div>
GROSS WT. 724 B ORIGINAL
CRG-06-011

クロス(十字)パターンCross Pattern

.cg-bg-cross {
  width: 220px;
  height: 120px;
  border-radius: 10px;
  background-color: #F7F6F2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 9v8M9 13h8' stroke='%23C89B6C' stroke-width='2'/%3E%3C/svg%3E");
}
<div class="cg-bg-cross"></div>
GROSS WT. 323 B ORIGINAL
CRG-06-012

シェブロン(山形)Chevron Zigzag

.cg-bg-chevron {
  width: 220px;
  height: 120px;
  border-radius: 10px;
  background:
    linear-gradient(135deg, #E8590C 25%, transparent 25%) -14px 0,
    linear-gradient(225deg, #E8590C 25%, transparent 25%) -14px 0,
    linear-gradient(315deg, #E8590C 25%, transparent 25%),
    linear-gradient(45deg, #E8590C 25%, transparent 25%);
  background-size: 28px 28px;
  background-color: #FBF4EA;
}
<div class="cg-bg-chevron"></div>
GROSS WT. 431 B ORIGINAL
CRG-06-013

動くメッシュグラデ背景Animated Mesh

.cg-bg-meshmove {
  width: 220px;
  height: 120px;
  border-radius: 10px;
  background-color: #FDF1E7;
  background-image:
    radial-gradient(at 25% 25%, rgba(232, 89, 12, .6) 0, transparent 50%),
    radial-gradient(at 75% 30%, rgba(242, 183, 7, .55) 0, transparent 50%),
    radial-gradient(at 60% 80%, rgba(58, 90, 120, .5) 0, transparent 55%);
  background-size: 180% 180%;
  animation: cg-bg-meshmove-drift 9s ease-in-out infinite alternate;
}
@keyframes cg-bg-meshmove-drift {
  to { background-position: 100% 100%, 0% 100%, 100% 0%; }
}
<div class="cg-bg-meshmove"></div>
GROSS WT. 578 B ORIGINAL
CRG-06-014

フェード方眼(ヒーロー背景)Fading Grid

/* mask-imageで方眼を下に向かって溶かす。テック系ヒーローの定番 */
.cg-bg-gridfade {
  width: 220px;
  height: 120px;
  border-radius: 10px;
  background-color: #14130F;
  background-image:
    linear-gradient(rgba(233, 231, 224, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233, 231, 224, .22) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
  border: 1px solid #2C2A24;
}
<div class="cg-bg-gridfade"></div>
GROSS WT. 592 B ORIGINAL
CRG-06-015

流れる斜めストライプ背景Flowing Stripes

.cg-bg-sflow {
  width: 220px;
  height: 120px;
  border-radius: 10px;
  background: repeating-linear-gradient(
    -45deg,
    #F7F6F2 0 14px,
    #ECE4D2 14px 28px
  );
  animation: cg-bg-sflow-run 1.8s linear infinite;
}
@keyframes cg-bg-sflow-run {
  to { background-position: 40px 0; }
}
<div class="cg-bg-sflow"></div>
GROSS WT. 323 B ORIGINAL
CRG-06-016

漂うドット背景Drifting Dots

.cg-bg-ddrift {
  width: 220px;
  height: 120px;
  border-radius: 10px;
  background-color: #FBF4EA;
  background-image:
    radial-gradient(#C89B6C 2px, transparent 2px),
    radial-gradient(rgba(200, 155, 108, .45) 1.5px, transparent 1.5px);
  background-size: 26px 26px, 26px 26px;
  background-position: 0 0, 13px 13px;
  animation: cg-bg-ddrift-move 5s linear infinite;
}
@keyframes cg-bg-ddrift-move {
  to { background-position: 26px 26px, 39px 39px; }
}
<div class="cg-bg-ddrift"></div>
GROSS WT. 493 B ORIGINAL
CRG-06-017

移ろう空グラデShifting Sky

.cg-bg-sky {
  width: 220px;
  height: 120px;
  border-radius: 10px;
  background: linear-gradient(180deg, #7FB4E8, #F5C77E, #E88A5D);
  background-size: 100% 300%;
  animation: cg-bg-sky-move 8s ease-in-out infinite alternate;
}
@keyframes cg-bg-sky-move {
  to { background-position: 0 100%; }
}
<div class="cg-bg-sky"></div>
GROSS WT. 326 B ORIGINAL
CRG-06-018

雨の背景Rainfall

.cg-bg-rain {
  width: 220px;
  height: 120px;
  border-radius: 10px;
  background-color: #232B36;
  background-image:
    linear-gradient(transparent 0 60%, rgba(160, 190, 220, .5) 82%, transparent 85%),
    linear-gradient(transparent 0 40%, rgba(160, 190, 220, .35) 68%, transparent 72%),
    linear-gradient(transparent 0 75%, rgba(160, 190, 220, .4) 92%, transparent 95%);
  background-size: 2px 60px, 2px 90px, 2px 44px;
  background-position: 20% -30px, 55% -50px, 85% -20px;
  background-repeat: repeat;
  animation: cg-bg-rain-fall .7s linear infinite;
}
@keyframes cg-bg-rain-fall {
  to { background-position: 20% 30px, 55% 40px, 85% 24px; }
}
<div class="cg-bg-rain"></div>
GROSS WT. 684 B ORIGINAL
CRG-06-019

瞬く星空Twinkling Stars

.cg-bg-stars {
  position: relative;
  width: 220px;
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, #0B1026, #1A2342);
}
.cg-bg-stars i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    30px 18px 0 #fff, 74px 44px 0 rgba(255,255,255,.8), 120px 12px 0 #fff,
    160px 58px 0 rgba(255,255,255,.7), 196px 30px 0 #fff, 48px 84px 0 rgba(255,255,255,.9),
    140px 96px 0 #fff, 90px 66px 0 rgba(255,255,255,.6), 186px 88px 0 rgba(255,255,255,.8);
  animation: cg-bg-stars-twinkle 2.4s ease-in-out infinite;
}
.cg-bg-stars i:last-child {
  transform: translate(12px, 8px);
  animation-delay: 1.2s;
}
@keyframes cg-bg-stars-twinkle {
  50% { opacity: .3; }
}
<div class="cg-bg-stars"><i></i><i></i></div>
GROSS WT. 809 B ORIGINAL
CRG-06-020

コンベア風ハザード帯Conveyor Hazard

.cg-bg-belt {
  width: 220px;
  height: 42px;
  border-radius: 6px;
  border: 2px solid #1B1A17;
  background: repeating-linear-gradient(
    -45deg,
    #F2B707 0 16px,
    #1B1A17 16px 32px
  );
  animation: cg-bg-belt-run 1.2s linear infinite;
}
@keyframes cg-bg-belt-run {
  to { background-position: 45px 0; }
}
<div class="cg-bg-belt"></div>
GROSS WT. 346 B ORIGINAL
CRG-06-021

ラバランプ背景Lava Lamp

.cg-bg-lava {
  position: relative;
  width: 220px;
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, #2A1030, #4A1040);
}
.cg-bg-lava i {
  position: absolute;
  bottom: -46px;
  border-radius: 46% 54% 52% 48% / 55% 48% 52% 45%;
  background: linear-gradient(135deg, #FF8A4D, #E8590C);
  filter: blur(2px);
  opacity: .85;
  animation: cg-bg-lava-rise 7s ease-in-out infinite;
}
.cg-bg-lava i:nth-child(1) { left: 14%; width: 42px; height: 46px; }
.cg-bg-lava i:nth-child(2) { left: 46%; width: 30px; height: 34px; animation-delay: 2.4s; animation-duration: 8.5s; }
.cg-bg-lava i:nth-child(3) { left: 72%; width: 24px; height: 26px; animation-delay: 4.6s; animation-duration: 6.5s; }
@keyframes cg-bg-lava-rise {
  0% { transform: translateY(0) scale(1); }
  45% { border-radius: 54% 46% 48% 52% / 48% 55% 45% 52%; }
  100% { transform: translateY(-165px) scale(.82); border-radius: 50%; }
}
<div class="cg-bg-lava"><i></i><i></i><i></i></div>
GROSS WT. 991 B ORIGINAL
CRG-06-022

ワープ星空背景Warp Starfield

.cg-bg-warp {
  position: relative;
  width: 220px;
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #10182E, #05060C);
}
/* 中心から放射状に星が伸びながら飛んでくる=ワープ航行 */
.cg-bg-warp i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    40px -20px 0 #fff, -60px 30px 0 rgba(255,255,255,.8), 80px 40px 0 #fff,
    -30px -50px 0 rgba(180,220,255,.9), 70px -45px 0 #fff, -80px -10px 0 rgba(255,255,255,.7),
    20px 55px 0 #fff, -50px 15px 0 rgba(200,230,255,.8), 55px 10px 0 #fff;
  animation: cg-bg-warp-fly 1.4s linear infinite;
}
.cg-bg-warp i:nth-child(2) { animation-delay: -.47s; }
.cg-bg-warp i:nth-child(3) { animation-delay: -.93s; }
@keyframes cg-bg-warp-fly {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(3.4); opacity: 0; }
}
<div class="cg-bg-warp"><i></i><i></i><i></i></div>
GROSS WT. 1055 B ORIGINAL
CRG-06-023

等高線が流れる背景Contour Lines

.cg-bg-contour {
  width: 220px;
  height: 120px;
  border-radius: 10px;
  background-color: #0C1424;
  /* 同心楕円を重ねて地形図の等高線に見せ、位置をずらして流す */
  background-image:
    repeating-radial-gradient(ellipse 90px 60px at 30% 40%, transparent 0 10px, rgba(90,180,220,.35) 10px 11px),
    repeating-radial-gradient(ellipse 80px 55px at 75% 70%, transparent 0 12px, rgba(90,180,220,.28) 12px 13px);
  background-size: 200% 200%, 200% 200%;
  animation: cg-bg-contour-drift 12s linear infinite;
}
@keyframes cg-bg-contour-drift {
  to { background-position: 60px 30px, -50px -40px; }
}
<div class="cg-bg-contour"></div>
GROSS WT. 659 B ORIGINAL
CRG-06-024

スポットライト格子背景Grid Spotlight

.cg-bg-gridspot {
  position: relative;
  width: 220px;
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #0B0F1A;
  background-image:
    linear-gradient(rgba(120,180,240,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,180,240,.16) 1px, transparent 1px);
  background-size: 22px 22px;
}
/* スポットライトが格子上を巡回して照らす(純CSS。マウス追従にしたい場合は
   mask位置を CSS変数 --x/--y にして pointermove で更新する) */
.cg-bg-gridspot::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(90,200,255,.9) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,200,255,.9) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask: radial-gradient(circle 52px, #000, transparent 68%) no-repeat;
  mask: radial-gradient(circle 52px, #000, transparent 68%) no-repeat;
  animation: cg-bg-gridspot-move 6s ease-in-out infinite;
}
@keyframes cg-bg-gridspot-move {
  0% { -webkit-mask-position: 8% 18%; mask-position: 8% 18%; }
  33% { -webkit-mask-position: 84% 28%; mask-position: 84% 28%; }
  66% { -webkit-mask-position: 42% 82%; mask-position: 42% 82%; }
  100% { -webkit-mask-position: 8% 18%; mask-position: 8% 18%; }
}
<div class="cg-bg-gridspot"></div>
GROSS WT. 1314 B ORIGINAL
CRG-06-025

レーダー掃引背景Radar Sweep

/* 掃引ビームが左→右へ振れる → 通過した位置の反応点がばねで点灯 → 波紋が広がって消える。
   3層(ビーム/反応点/波紋)のタイムラインで「探す→見つける→残響」の物語にしている */
.cg-bg-radar {
  position: relative;
  width: 220px;
  height: 132px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #06140F;
  background-image:
    radial-gradient(circle at 50% 100%, rgba(60, 220, 160, .16), transparent 66%),
    repeating-radial-gradient(circle at 50% 100%, transparent 0 31px, rgba(60, 220, 160, .18) 31px 32px),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(60, 220, 160, .16) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}
/* 掃引アーム(残光つき) */
.cg-bg-radar::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 128px;
  height: 3px;
  transform-origin: 0 50%;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(126, 255, 200, .95), rgba(126, 255, 200, 0));
  box-shadow: 0 0 10px rgba(90, 240, 180, .5);
  animation: cg-bg-radar-arm 5.6s cubic-bezier(.5, 0, .5, 1) infinite;
}
/* アームが通り過ぎた側にうっすら残る掃引跡 */
.cg-bg-radar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 100%, rgba(90, 240, 180, .22), transparent 58%);
  animation: cg-bg-radar-after 5.6s ease-in-out infinite;
}
.cg-bg-radar-blip {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9BFFD4;
  box-shadow: 0 0 10px rgba(126, 255, 200, .95);
  opacity: 0;
  animation: cg-bg-radar-blip 5.6s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
.cg-bg-radar-b1 { left: 25%; top: 46%; }
.cg-bg-radar-b2 { left: 71%; top: 31%; animation-delay: 2.5s; }
.cg-bg-radar-ping {
  position: absolute;
  left: 25%;
  top: 46%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(126, 255, 200, .85);
  opacity: 0;
  animation: cg-bg-radar-ping 5.6s ease-out infinite;
}
@keyframes cg-bg-radar-arm {
  0% { transform: rotate(180deg); opacity: .3; }
  8% { opacity: 1; }
  46% { transform: rotate(268deg); }
  54% { transform: rotate(276deg); }
  92% { opacity: 1; }
  100% { transform: rotate(360deg); opacity: .3; }
}
@keyframes cg-bg-radar-after {
  0%, 100% { opacity: .25; }
  30% { opacity: .6; }
  70% { opacity: .4; }
}
@keyframes cg-bg-radar-blip {
  0%, 15% { opacity: 0; transform: scale(.25); }
  21% { opacity: 1; transform: scale(1.6); }
  28% { transform: scale(1); }
  62% { opacity: .5; }
  100% { opacity: 0; transform: scale(.8); }
}
@keyframes cg-bg-radar-ping {
  0%, 17% { opacity: 0; transform: scale(.6); }
  23% { opacity: .85; }
  58%, 100% { opacity: 0; transform: scale(4.4); }
}
/* 静止形: アームを右上に構え、反応点は点灯済み・波紋は広がりきった状態で止める */
@media (prefers-reduced-motion: reduce) {
  .cg-bg-radar::before,
  .cg-bg-radar::after,
  .cg-bg-radar-blip,
  .cg-bg-radar-ping { animation: none; }
  .cg-bg-radar::before { transform: rotate(304deg); opacity: 1; }
  .cg-bg-radar::after { opacity: .45; }
  .cg-bg-radar-blip { opacity: 1; transform: none; }
  .cg-bg-radar-ping { opacity: .4; transform: scale(2.6); }
}
<div class="cg-bg-radar">
  <i class="cg-bg-radar-blip cg-bg-radar-b1"></i>
  <i class="cg-bg-radar-blip cg-bg-radar-b2"></i>
  <i class="cg-bg-radar-ping"></i>
</div>
GROSS WT. 3448 B ORIGINAL