本文へスキップ

CRG-06 — BACKGROUNDS

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

ドット・格子・ストライプ。画像なしの床材。 すべて画像不使用・クラス接頭辞 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