web色変換
グラデーション css ジェネレーター
保存グラデーション
グラデーション css ジェネレーター
コピー完了
{{DirectCSSText}}
コピー完了
{{ALL_CSSText}}
角度
グラデーションセット
{{ item }}
削除
複製
↑
↓
保存mdi-plus
※ダブルクリック(タップ)で色を複製
ドラッグアンドドロップで入れ替え可能(ブラウザ環境によっては不可)
保存はグラデーションの色のみ
保存する場合ブラウザのローカルストレージを有効にしてください。
オートジェネレーター
色相
最小：{{Auto_Generator_H[0]}} 最大：{{Auto_Generator_H[1]}}
最小：{{Auto_Generator_S[0]}} 最大：{{Auto_Generator_S[1]}}
最小：{{Auto_Generator_V[0]}} 最大：{{Auto_Generator_V[1]}}
グラデーション最大数
グラデーションに使う色最大数
グラデーション ジェネレートmdi-plus
グラデーションセットに追加
グラデーションセットに入れ替え
保存
css border グラデーション
border グラデーション サンプル
コピー完了
{{Border_CSSDispText}}
.css_gradient{
width: {{Border_AreaWidth}}px;
height: auto;
padding: 0;
text-align: {{Border_TextAlign}};
border-left: {{Border_Vertical}}px {{Border_Style}} {{GradiantData_Value[0]}};
border-right: {{Border_Vertical}}px {{Border_Style}} {{GradiantData_Value[GradiantData_Value.length-1]}} ;
}
.css_gradient::before,
.css_gradient::after{ content: ""; display: block; height: {{Border_Horizon}}px; background:{{TX_Gradiant}} }
{{Border_Text}}
border グラデーション オプション
css 文字 グラデーション ジェネレーター
文字グラデーションサンプル
{{Font_Text}}
コピー完了
{{Font_CSSDispText}}
※この文字の項目は一度ここを表示してから再度グラデーションを変更すると
サンプル文字の表示がおかしくなります。
グラデーションを変更したい場合は再度ページを読み込むように
してください。
文字グラデーション オプション
css 下線 グラデーション
下線 グラデーションサンプル
{{UnderLine_Text }}
コピー完了
{{UnderLine_CSSDispText}}
下線 グラデーション オプション
css 線 グラデーション
css 線 グラデーションサンプル
コピー完了
{{HR_CSSDispText}}
css 線 グラデーション オプション
css グラデーション 透過 ジェネレーター
css グラデーションの透過はstyleで opacityを指定
もしくは色の指定でRGBAのAの部分を変更します。
グラデーションカラーの選択時に設定すると透過できます。
下のスライダーの変更でサンプルとタグを確認できます。
コピー完了
{{DirectCSSText}}
コピー完了
{{ALL_CSSText}}
下線 グラデーションサンプル
{{UnderLine_Text }}
コピー完了
{{UnderLine_CSSDispText}}
css 線 グラデーションサンプル
コピー完了
{{HR_CSSDispText}}
css 背景 色 グラデーション
コピー完了
{{DirectCSSText}}
コピー完了
{{ALL_CSSText}}
cssで背景色をグラデーションにするには上のものをタグを指定するだけで
簡単に変更できます。
一般的なhtmlであれば背景全面を変更する場合bodyのタグか
コンテンツのタグに上に記載されているstyleを追加します。
コンテンツが上に重なると隠れるので
すべての背景がグラデーションになるというわけではないです。
wordpressであれば、テーマにもよりますが、heder.phpかsingle.phpに
記載されていますのでそこを変更します。
(テーマによりbodyにphp関数を呼び出してstyleなどを指定しています。)
※ここはstyleの背景色(background)にグラデーションを指定しています。
保存したグラデーション
削除
読み込み
tag:16進数, 一括変換, 一覧, 変換, 色見本, 配色,