本文へスキップ

CRG-03 — GRADIENTS

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

背景・文字・ボーダーに流し込む色の配合表。 すべて画像不使用・クラス接頭辞 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
CRG-03-024

熱が広がるヒートグラデHeat Bloom Gradient

/* 動く層は3つ: ①下地のグラデが8の字に流れる ②中心の熱源が不規則に膨らむ
   ③走査光が横切る。それぞれ段数を変えて周期をずらすので、ループの継ぎ目が見えにくい */
.cg-gr-heat {
  position: relative;
  width: 260px;
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(115deg, #10233A 0%, #2C3F6B 26%, #8C3B5C 52%, #D9622B 76%, #F2B707 100%);
  background-size: 260% 260%;
  animation: cg-gr-heat-drift 11s cubic-bezier(.45, .05, .55, .95) infinite;
}
/* 熱源 */
.cg-gr-heat-core {
  position: absolute;
  inset: -22%;
  background: radial-gradient(circle at 50% 55%, rgba(242, 183, 7, .85) 0%, rgba(232, 89, 12, .42) 28%, rgba(232, 89, 12, 0) 62%);
  mix-blend-mode: screen;
  animation: cg-gr-heat-core 6.5s ease-in-out infinite;
}
/* 走査光 */
.cg-gr-heat-scan {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -32%;
  width: 26%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 100%);
  filter: blur(1px);
  animation: cg-gr-heat-scan 5.2s cubic-bezier(.7, 0, .3, 1) infinite;
}
@keyframes cg-gr-heat-drift {
  0%   { background-position: 0% 20%; }
  25%  { background-position: 45% 0%; }
  50%  { background-position: 100% 60%; }
  75%  { background-position: 55% 100%; }
  100% { background-position: 0% 20%; }
}
@keyframes cg-gr-heat-core {
  0%, 100% { transform: scale(.72); opacity: .45; }
  22%      { transform: scale(1.02); opacity: .9; }
  48%      { transform: scale(.86); opacity: .6; }
  70%      { transform: scale(1.14); opacity: .95; }
}
@keyframes cg-gr-heat-scan {
  0%, 12%   { transform: translateX(0) skewX(-8deg); opacity: 0; }
  24%       { opacity: .8; }
  72%       { opacity: .55; }
  88%, 100% { transform: translateX(520%) skewX(-8deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* 静止形: 熱源が中心で灯った一枚絵として成立させる */
  .cg-gr-heat { animation: none; background-position: 50% 45%; }
  .cg-gr-heat-core { animation: none; transform: scale(1); opacity: .8; }
  .cg-gr-heat-scan { animation: none; opacity: 0; }
}
<div class="cg-gr-heat" role="img" aria-label="熱が広がるグラデーション背景"><span class="cg-gr-heat-core" aria-hidden="true"></span><span class="cg-gr-heat-scan" aria-hidden="true"></span></div>
GROSS WT. 2404 B ORIGINAL
CRG-03-025

プリズムで分光するグラデPrism Refraction

/* 物語: 白い光線が走り込む → プリズムに当たって内側が灯り、ガラスが潰れて弾む →
   分光した虹の扇が開いてゆっくり漂う → 収束してループ */
.cg-gr-prism {
  position: relative;
  width: 320px;
  height: 180px;
  overflow: hidden;
  border-radius: 14px;
  background: radial-gradient(120% 140% at 14% 18%, #1E2440 0%, #0B0E1B 72%);
  isolation: isolate;
}
/* ①入射光。左から一気に伸びて、通過後は余韻として細く残る */
.cg-gr-prism-beam {
  position: absolute;
  left: -18%;
  top: 46%;
  width: 64%;
  height: 5px;
  border-radius: 3px;
  transform-origin: 0 50%;
  transform: rotate(-16deg) scaleX(0);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85) 62%, #FFFFFF);
  box-shadow: 0 0 14px rgba(190, 215, 255, .7);
  animation: cg-gr-prism-beam 5.4s cubic-bezier(.2, .9, .3, 1) infinite;
}
/* ②分光した扇。conicで虹の帯を作り、開き角と広がりを揺らす */
.cg-gr-prism-fan {
  position: absolute;
  left: 47%;
  top: 50%;
  width: 300px;
  height: 300px;
  margin-top: -150px;
  transform-origin: 0 50%;
  transform: rotate(7deg) scaleX(.18);
  opacity: 0;
  background: conic-gradient(from -15deg at 0 50%,
    rgba(255, 70, 90, 0) 0deg,
    rgba(255, 70, 90, .85) 4deg,
    rgba(255, 168, 40, .85) 9deg,
    rgba(248, 232, 74, .85) 14deg,
    rgba(70, 220, 148, .8) 19deg,
    rgba(72, 168, 255, .85) 24deg,
    rgba(154, 92, 255, .8) 29deg,
    rgba(154, 92, 255, 0) 34deg);
  filter: blur(7px);
  mix-blend-mode: screen;
  animation: cg-gr-prism-fan 5.4s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
/* ③プリズム本体。着弾の瞬間だけ潰れて、戻りで少し伸びる */
.cg-gr-prism-glass {
  position: absolute;
  left: 40%;
  top: 50%;
  width: 62px;
  height: 56px;
  margin-top: -28px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(150deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .05) 46%, rgba(150, 195, 255, .26));
  animation: cg-gr-prism-glass 5.4s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
/* ④副次レイヤー: 通過の瞬間に内側が灯り、余韻がじわりと残る */
.cg-gr-prism-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: radial-gradient(62% 52% at 50% 80%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 72%);
  opacity: 0;
  animation: cg-gr-prism-flash 5.4s ease-out infinite;
}
@keyframes cg-gr-prism-beam {
  0%        { transform: rotate(-16deg) scaleX(0); opacity: 0; }
  7%        { transform: rotate(-16deg) scaleX(.3); opacity: 1; }
  24%       { transform: rotate(-16deg) scaleX(1); opacity: 1; }
  36%       { transform: rotate(-16deg) scaleX(1); opacity: .8; }
  72%       { transform: rotate(-16deg) scaleX(1); opacity: .45; }
  90%       { transform: rotate(-16deg) scaleX(1); opacity: 0; }
  100%      { transform: rotate(-16deg) scaleX(0); opacity: 0; }
}
@keyframes cg-gr-prism-fan {
  0%, 23%   { transform: rotate(7deg) scaleX(.18); opacity: 0; }
  32%       { transform: rotate(1deg) scaleX(1.08); opacity: .95; }
  41%       { transform: rotate(-1deg) scaleX(.94); opacity: .9; }
  54%       { transform: rotate(0deg) scaleX(1.02); opacity: .82; }
  74%       { transform: rotate(2deg) scaleX(1); opacity: .62; }
  90%       { transform: rotate(5deg) scaleX(.5); opacity: 0; }
  100%      { transform: rotate(7deg) scaleX(.18); opacity: 0; }
}
@keyframes cg-gr-prism-glass {
  0%, 23%   { transform: scale(1, 1) rotate(0deg); }
  28%       { transform: scale(1.12, .86) rotate(-2.5deg); }
  36%       { transform: scale(.95, 1.07) rotate(1.4deg); }
  44%       { transform: scale(1.03, .98) rotate(-.5deg); }
  52%, 100% { transform: scale(1, 1) rotate(0deg); }
}
@keyframes cg-gr-prism-flash {
  0%, 23%   { opacity: 0; }
  29%       { opacity: 1; }
  46%       { opacity: .4; }
  74%       { opacity: .2; }
  100%      { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* 静止形: 光がプリズムを抜けて虹が開いた「分光の一枚絵」として成立させる */
  .cg-gr-prism-beam,
  .cg-gr-prism-fan,
  .cg-gr-prism-glass,
  .cg-gr-prism-glass::after { animation: none; }
  .cg-gr-prism-beam { transform: rotate(-16deg) scaleX(1); opacity: 1; }
  .cg-gr-prism-fan { transform: rotate(0deg) scaleX(1); opacity: .85; }
  .cg-gr-prism-glass { transform: none; }
  .cg-gr-prism-glass::after { opacity: .55; }
}
<div class="cg-gr-prism" role="img" aria-label="プリズムで白い光が虹に分かれるグラデーション"><span class="cg-gr-prism-beam"></span><span class="cg-gr-prism-fan"></span><span class="cg-gr-prism-glass"></span></div>
GROSS WT. 4723 B ORIGINAL