グレースケール
100%
フィルターの組み合わせ
filter: grayscale(100%);
デザインツール
CSS Filter ジェネレーター - ライブ画像エフェクト
blur、grayscale、contrast などの CSS filter 関数をライブプレビュー付きで組み合わせられます。スライダー操作だけで filter: blur(2px) grayscale(100%); のような stack を作成し、そのままコピーできます。
DesignCSSFilter
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
设计配色
CSS Filter ジェネレーター
CSS Filter Rule
filter: none;
等待调整滤镜。
利用シーン
- サイトアイコンや商品カードに grayscale や muted filter を試す
使い方
- filter のスライダーを動かし、出力パネルから CSS をコピーして stylesheet に貼り付ける
入出力サンプル
FAQ
ブラウザ対応は限定的ですか？
CSS filter は主要なデスクトップ／モバイルの最新ブラウザで広くサポートされています。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。
カラー反転
カラー反転 - RGB 反転とダークプレビュー
各 RGB channel を 255 から引いて色を反転します。元色と反転色を比較し、サンプルレイヤーをプレビューしながら、ダークテーマ検討向けの CSS 変数スニペットを出力できます。
色 反転 ダーク
パステルカラージェネレーター
パステルカラージェネレーター - 柔らかい低彩度パレット
柔らかいパステル調やモランディ風の配色をブラウザ内で生成できます。色数やスタイルを選び、残したい swatch をロックして、チャート、背景、やさしい UI テーマ向けに HEX 一覧や CSS 変数として書き出せます。
パステル パレット 色