デザイン.cssで作るグラデーション：ここから.cssをコピーできます。Gradation Design

divタグ１つと.cssで実現できるグラデーション
ここで定義したdivと.cssを利用できます。
両方をコピペすることで、あなたのサイトでも利用できます。

Thank you for reading this post, don't forget to subscribe!

<div class="filter_x"></div>       、
<div class="filter_y"></div>       と、
<style type="text/css">
.filter_ｘ｛
 background: radial-gradient(　 );
    　｜；    ｝
.filter_y｛
  background: linear-gradient(　,　 ,　);
    　｜；    ｝
</style>      で、作る：グラデーション色々

以降のSourceは、パソコン操作でご覧いただくことをお勧めします。
（画像幅の狭いスマホの場合、グラデーション画像の大きさを優先表示させている為、Source部分が右端で見切れてしまい、操作性も良くはありません。）

PR広告

グラデーション色々
Rainbow

グラデーション色々

中心から外に向かって鮮紫[#6002ee]のグラデーション

単純なぼかしを入れた円の表示 radial-gradient()を使用

<!-- 「Source Code」 -->
<div class="filter_01"></div>
<style type="text/css">
.filter_01{
 --sample-color: 96, 2, 238; /* #6002ee  鮮やかな紫 */
 aspect-ratio: 1 / 1;               /* 円形 */
 background: radial-gradient(
   circle,
   rgb(var(--sample-color)),
   rgba(var(--sample-color), 0)
  );
/*単純なぼかしを入れた円の表示 radial-gradient() 
　rgb(var(--sample-color)),で、色を付けており、
  外側が、rgba(var(--sample-color), 0)で、透明のグラデーションです。
  外側が透明なため、円の輪郭がサイト全体の背景色に溶け込みます。
  ただ、radial-gradient() で透明を指定する際は、現状では transparent や
   #0000 は使えません。 もし使えば、Safari で透明の部分が黒くなります。
(transparentの使用例は、別途後半に記載します)
また、radial-gradient() の値に <position>> や <size>> を指定し、円を調整できます。*/
border-radius: 50%;            /**/
filter:  blur(50px);
/* ➡ 数値を大きくすれば、ぼかしは強くなります➡ex.blur(100px) */
width: min(100%, 400px);
}
/*グラデーションの中心を右にずらす場合は、
  background: radial-gradient(
     circle at 80%, 
     rgb(var(--sample-color)), 
     rgba(var(--sample-color), 0)
  );
*/
</style>

２つの円を45度で重ね[red]と[blue]のグラデーション

linear-gradient() を使いの背景色を指定するぼかしを入れた円の表示
➡：円の輪郭がにじみます。

<!-- 「Source Code」 -->
<div class="filter_02"></div>
<style type="text/css">
.filter_02{
  aspect-ratio: 1 / 1;
/*アスペクト比：1vs1で、円形*/
　background: linear-gradient(45deg, red, blue);
/* 背景に      linear-gradient() を使い
    45度の角度で、レッド・ブルーの背景色 */
　border-radius: 50%;
/*border-radius: 50%;で四隅に50％の角丸を指定することで円を作る*/
　filter:  blur(50px);   /*        
   blur(50px); 半径50pxで、ぼかす*/
　　width: min(100%, 400px);   /* 
    ➡幅    （最小：Viewport width:100%、最大：400px）　*/
}
</style>

円を30度で重ね[Dark Orange]と[Red Wine]のグラデーション

linear-gradient() に ::after疑似要素を使用
➡ 円の輪郭がサイト全体の背景色に溶け込む

<!-- 「Source Code」 -->
<div class="filter_03"></div>
<style type="text/css">
/*
.filter_03　blurで、ぼかし効果のフィルターを掛ける*/
.filter_03{
  aspect-ratio: 1 / 1; /* 円形 */
  background: linear-gradient(30deg, #f88017, #990012);
  border-radius: 50%;
  filter: blur(5px); /*数値が大きい程ぼかし効果大*/
  position: relative;
  width: min(100%, 400px);
}
/* --bg-color {background: rgb(014,027,063);} はダークモード
::after 疑似要素で、中央を透明に、外側を背景色と同色のグラデーション
radial-gradient() 関数は中央から末端図形 (およびその先) に向けて
一連の同心円の形状を描きます。図形の端は円または楕円です。
（滑らかなグラデーションを生成する）
*/
.filter_03::after {
  background: radial-gradient(rgba(var(--bg-color), 0), rgb(var(--bg-color)));
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
</style>

日本の伝統色とtransparentのシンプルなグラデーション

　 transparentと交互に日本の伝統色のシンプルなグラデーション

<!-- 「Source Code」 -->
<div class="filter_04"></div>
<style type="text/css">
  /*
  .filter_04　％で、ぼかし効果のフィルターを掛ける*/
  .filter_04 {
    aspect-ratio: 1.1 / 1.8;           /* 縦だ円形 */
    background-image: radial-gradient(
      #98d98e 03%,     /*若緑*/
      transparent 07%,
      #38b48b 20%,     /*翡翠*/
      transparent 10%,
      #00a497 30%,    /*青緑*/
      transparent 10%,
      #007b43 40%,    /*常盤色*/
      transparent 10%,
      #00552e 50%,    /*深緑*/
      transparent 10%,
      #005243 65%,    /*鉄色*/
      transparent 10%    /*最外周：ダークモード色*/
      );
    width: min(100%, 200px);  
  }
  </style>

PR広告

Rainbow

Animation

Animation Rainbow