本文へスキップ

CRG-03 — GRADIENTS

グラデーション23点 在庫あり

背景・文字・ボーダーに流し込む色の配合表。 すべて画像不使用・クラス接頭辞 cg- 付きで、既存サイトに安全に積み込めます。

CRG-03-001

サンセット背景Sunset

.cg-gr-sunset {
  width: 220px;
  height: 120px;
  border-radius: 12px;
  background: linear-gradient(135deg, #F2B707 0%, #E8590C 55%, #B03A5B 100%);
}
<div class="cg-gr-sunset"></div>
GROSS WT. 183 B ORIGINAL
CRG-03-002

ディープシー背景Deep Sea

.cg-gr-deepsea {
  width: 220px;
  height: 120px;
  border-radius: 12px;
  background: linear-gradient(160deg, #3A5A78 0%, #1E3247 60%, #14130F 100%);
}
<div class="cg-gr-deepsea"></div>
GROSS WT. 185 B ORIGINAL
CRG-03-003

メッシュグラデーションMesh

.cg-gr-mesh {
  width: 220px;
  height: 120px;
  border-radius: 12px;
  background-color: #FDF1E7;
  background-image:
    radial-gradient(at 20% 20%, rgba(232, 89, 12, .55) 0, transparent 55%),
    radial-gradient(at 85% 15%, rgba(242, 183, 7, .5) 0, transparent 50%),
    radial-gradient(at 75% 85%, rgba(58, 90, 120, .5) 0, transparent 55%),
    radial-gradient(at 15% 80%, rgba(176, 58, 91, .4) 0, transparent 50%);
}
<div class="cg-gr-mesh"></div>
GROSS WT. 451 B ORIGINAL
CRG-03-004

流れるグラデ背景Animated Flow

.cg-gr-flow {
  width: 220px;
  height: 120px;
  border-radius: 12px;
  background: linear-gradient(120deg, #E8590C, #B03A5B, #3A5A78, #E8590C);
  background-size: 300% 300%;
  animation: cg-gr-flow-move 8s ease infinite;
}
@keyframes cg-gr-flow-move {
  50% { background-position: 100% 50%; }
}
<div class="cg-gr-flow"></div>
GROSS WT. 325 B ORIGINAL
CRG-03-005

Gradient

グラデーション文字Gradient Text

.cg-gr-text {
  margin: 0;
  font-size: 40px;
  font-weight: 900;
  background: linear-gradient(90deg, #E8590C, #F2B707);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
<p class="cg-gr-text">Gradient</p>
GROSS WT. 237 B ORIGINAL
CRG-03-006
グラデ枠のボックス

グラデーション枠線Gradient Border

.cg-gr-border {
  padding: 20px 28px;
  font-weight: 700;
  border-radius: 12px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg, #E8590C, #B03A5B, #3A5A78) border-box;
  border: 3px solid transparent;
}
<div class="cg-gr-border">グラデ枠のボックス</div>
GROSS WT. 300 B ORIGINAL
CRG-03-007

斜めストライプグラデDiagonal Stripes

.cg-gr-stripe {
  width: 220px;
  height: 120px;
  border-radius: 12px;
  background: repeating-linear-gradient(
    -45deg,
    #F2B707 0 16px,
    #E8590C 16px 32px
  );
}
<div class="cg-gr-stripe"></div>
GROSS WT. 205 B ORIGINAL
CRG-03-008
Frosted

ガラス越しグラデFrosted Tint

.cg-gr-frost {
  position: relative;
  width: 220px;
  height: 120px;
  border-radius: 12px;
  background: linear-gradient(135deg, #E8590C, #3A5A78);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cg-gr-frost span {
  padding: 10px 22px;
  font-weight: 700;
  color: #fff;
  border-radius: 8px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
<div class="cg-gr-frost"><span>Frosted</span></div>
GROSS WT. 544 B ORIGINAL
CRG-03-009
SPOTLIGHT

スポットライト背景Radial Spotlight

.cg-gr-spot {
  width: 220px;
  height: 120px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 30%, #3A5A78 0%, #1B1A17 70%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-gr-spot span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  color: #F2B707;
}
<div class="cg-gr-spot"><span>SPOTLIGHT</span></div>
GROSS WT. 367 B ORIGINAL
CRG-03-010

ツートン斜め分割Duotone Split

.cg-gr-split {
  width: 220px;
  height: 120px;
  border-radius: 12px;
  background: linear-gradient(115deg, #1B1A17 0 55%, #E8590C 55% 100%);
}
<div class="cg-gr-split"></div>
GROSS WT. 175 B ORIGINAL
CRG-03-011

コニック(円錐)グラデConic Wheel

.cg-gr-conic {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #E8590C, #F2B707, #2B8A78, #3A5A78, #C2426B, #E8590C
  );
}
<div class="cg-gr-conic"></div>
GROSS WT. 209 B ORIGINAL
CRG-03-012

ザラつきグラデ(グレイン)Grainy Gradient

.cg-gr-grain {
  width: 220px;
  height: 120px;
  border-radius: 12px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='.28'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #E8590C, #C2426B 60%, #3A5A78);
}
<div class="cg-gr-grain"></div>
GROSS WT. 462 B ORIGINAL
CRG-03-013
in oklchin srgb

OKLCH補間グラデOKLCH Interpolation

/* oklch補間は中間色が濁らず、知覚的に均等につながる */
.cg-gr-oklch {
  display: grid;
  gap: 10px;
  width: 220px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.cg-gr-oklch span {
  padding: 18px 14px;
  border-radius: 10px;
  background: linear-gradient(90deg in oklch, #E8590C, #3A5A78);
}
.cg-gr-oklch .old {
  background: linear-gradient(90deg, #E8590C, #3A5A78);
}
<div class="cg-gr-oklch"><span>in oklch</span><span class="old">in srgb</span></div>
GROSS WT. 488 B ORIGINAL
CRG-03-014
ほぼ同色の2色で、面にごく浅い奥行きを作る

超微妙グラデ(奥行き錯覚)Ultra-Subtle Depth

.cg-gr-subtle {
  width: 240px;
  padding: 30px 22px;
  font-size: 13px;
  font-weight: 700;
  color: #4A463E;
  border-radius: 14px;
  background: linear-gradient(160deg, #FBFAF6, #EFEDE6);
  border: 1px solid #E5E2D8;
}
<div class="cg-gr-subtle">ほぼ同色の2色で、面にごく浅い奥行きを作る</div>
GROSS WT. 314 B ORIGINAL
CRG-03-015

呼吸するグラデBreathing Gradient

.cg-gr-breathe {
  width: 220px;
  height: 120px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 55%, #F2B707, #E8590C 55%, #B03A5B);
  background-size: 130% 130%;
  background-position: center;
  animation: cg-gr-breathe-in 4.5s ease-in-out infinite;
}
@keyframes cg-gr-breathe-in {
  50% { background-size: 190% 190%; filter: saturate(1.25); }
}
<div class="cg-gr-breathe"></div>
GROSS WT. 400 B ORIGINAL
CRG-03-016

回転コニックサークルSpinning Conic

.cg-gr-spin {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #E8590C, #F2B707, #2B8A78, #3A5A78, #C2426B, #E8590C);
  animation: cg-gr-spin-turn 6s linear infinite;
}
@keyframes cg-gr-spin-turn {
  to { transform: rotate(360deg); }
}
<div class="cg-gr-spin"></div>
GROSS WT. 311 B ORIGINAL
CRG-03-017

流れるストライプRunning Stripes

.cg-gr-run {
  width: 220px;
  height: 120px;
  border-radius: 12px;
  background: repeating-linear-gradient(
    -45deg,
    #E8590C 0 16px,
    #F2B707 16px 32px
  );
  background-size: 200% 200%;
  animation: cg-gr-run-move 1.4s linear infinite;
}
@keyframes cg-gr-run-move {
  to { background-position: 45px 0; }
}
<div class="cg-gr-run"></div>
GROSS WT. 347 B ORIGINAL
CRG-03-018
PREMIUM PASS

光沢が走るパネルGlossy Sweep

.cg-gr-gloss {
  position: relative;
  width: 220px;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #3A5A78, #1E3247);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-gr-gloss span {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .16em;
  color: #EAF2FF;
}
.cg-gr-gloss::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -60%;
  width: 40%;
  height: 140%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg);
  animation: cg-gr-gloss-sweep 3s ease-in-out infinite;
}
@keyframes cg-gr-gloss-sweep {
  0%, 55% { left: -60%; }
  100% { left: 130%; }
}
<div class="cg-gr-gloss"><span>PREMIUM PASS</span></div>
GROSS WT. 774 B ORIGINAL
CRG-03-019

水面ゆらぎグラデWater Sway

.cg-gr-water {
  width: 220px;
  height: 120px;
  border-radius: 12px;
  background:
    radial-gradient(ellipse 80% 45% at 30% 20%, rgba(255, 255, 255, .28), transparent 60%),
    radial-gradient(ellipse 70% 40% at 70% 80%, rgba(20, 60, 90, .5), transparent 65%),
    linear-gradient(180deg, #3A9BD5, #1E5378);
  background-size: 160% 160%, 160% 160%, 100% 100%;
  animation: cg-gr-water-move 6s ease-in-out infinite alternate;
}
@keyframes cg-gr-water-move {
  to { background-position: 80% 40%, 20% 60%, 0 0; }
}
<div class="cg-gr-water"></div>
GROSS WT. 546 B ORIGINAL
CRG-03-020
枠の色が回り続ける

枠グラデが流れるボックスFlowing Border

@property --cg-bflow-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.cg-gr-bflow {
  padding: 22px 30px;
  font-weight: 700;
  border-radius: 14px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--cg-bflow-angle), #E8590C, #F2B707, #3A5A78, #C2426B, #E8590C) border-box;
  border: 3px solid transparent;
  animation: cg-gr-bflow-spin 4s linear infinite;
}
@keyframes cg-gr-bflow-spin {
  to { --cg-bflow-angle: 360deg; }
}
<div class="cg-gr-bflow">枠の色が回り続ける</div>
GROSS WT. 546 B ORIGINAL
CRG-03-021

オーロラ漂うグラデAurora Drift

.cg-gr-aurora {
  position: relative;
  width: 220px;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  background: #14130F;
}
.cg-gr-aurora span {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  filter: blur(24px);
  opacity: .65;
  animation: cg-gr-aurora-drift 7s ease-in-out infinite alternate;
}
.cg-gr-aurora span:nth-child(1) { background: #2B8A78; top: -30px; left: -20px; }
.cg-gr-aurora span:nth-child(2) { background: #C2426B; top: 10px; left: 90px; animation-delay: -2.3s; }
.cg-gr-aurora span:nth-child(3) { background: #3A5A78; top: 40px; left: 20px; animation-delay: -4.6s; }
@keyframes cg-gr-aurora-drift {
  to { transform: translate(24px, 18px) scale(1.15); }
}
<div class="cg-gr-aurora"><span></span><span></span><span></span></div>
GROSS WT. 793 B ORIGINAL
CRG-03-022

ホバーで走る光沢グラデHover Tilt Sheen

/* transform/opacityのみで動かす低INP設計のホバー演出 */
.cg-gr-sheen {
  position: relative;
  padding: 14px 32px;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: linear-gradient(135deg, #E8590C, #B03A5B);
  overflow: hidden;
  isolation: isolate;
}
.cg-gr-sheen::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%);
  transform: translateX(-60%);
  opacity: 0;
  transition: transform .6s ease, opacity .3s ease;
}
.cg-gr-sheen:hover::after {
  transform: translateX(60%);
  opacity: 1;
}
<button class="cg-gr-sheen">Explore</button>
GROSS WT. 742 B ORIGINAL
CRG-03-023
color-mix()

color-mixで滲む2色Color-mix Bloom

@property --cg-mix-ratio {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}
.cg-gr-mixshift {
  width: 220px;
  height: 120px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklch, #E8590C var(--cg-mix-ratio), #3A5A78);
  animation: cg-gr-mixshift-run 5s ease-in-out infinite alternate;
}
.cg-gr-mixshift span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #fff;
  font-family: monospace;
}
@keyframes cg-gr-mixshift-run {
  to { --cg-mix-ratio: 100%; }
}
<div class="cg-gr-mixshift"><span>color-mix()</span></div>
GROSS WT. 630 B ORIGINAL