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

Gradation Design css :デザイン
Gradation Design
記事内に広告が含まれています。

divタグ1つと.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_x{
 background: radial-gradient(  );
     |;    }
.filter_y{
  background: linear-gradient( ,  , );
     |;    }
</style>      で、作る:グラデーション色々

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

PR広告
PR広告

グラデーション色々

中心から外に向かって鮮紫[#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> 

2つの円を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

Rainbow

Animation

Animation Rainbow

コメント