CSSフィルタージェネレーター

CSS filterプロパティの効果をスライダーで視覚的に調整し、CSSコードをワンクリックでコピーできます。画像アップロードにも対応。

プレビュー

フィルターなし
Original
フィルター適用後
Filtered

プリセット

フィルター調整

px
%
%
%
deg
%
%
%
%

Drop Shadow

CSSコード

filter: none;

適用中のフィルター:

フィルターなし

CSS filterプロパティとは

CSS filterプロパティは、HTML要素にぼかし・明るさ調整・コントラスト変更・グレースケール化などの 視覚効果を適用するためのプロパティです。画像だけでなく、テキストや背景など あらゆるHTML要素に対して使用できます。

複数のフィルター関数を組み合わせることで、Instagram風のフォトフィルターや ホバーエフェクト、ローディング時のぼかし表現など、さまざまなデザイン効果を CSSだけで実現できます。

対応フィルター

フィルター効果値の範囲
blurガウスぼかし0px〜
brightness明るさ調整0%〜300%
contrastコントラスト調整0%〜300%
grayscaleグレースケール化0%〜100%
hue-rotate色相回転0deg〜360deg
invert色反転0%〜100%
opacity不透明度0%〜100%
saturate彩度調整0%〜300%
sepiaセピア効果0%〜100%
drop-shadowドロップシャドウX Y Blur Color

このツールの使い方

  • プリセットから効果を選択するか、スライダーで各フィルターを個別に調整します
  • リアルタイムプレビューでフィルター効果を確認します
  • 自分の画像をアップロードして効果を確認することもできます
  • 「コピー」ボタンでCSSコードをクリップボードにコピーします
  • CSSのfilterプロパティとしてスタイルシートに貼り付けます

このツールが役に立ったらシェアしてください

Share:

ご意見・ご要望をお聞かせください

機能追加を求む！不具合を見つけた！

Powered by IdeaSpool

関連記事

Focus Blog

CSSジェネレーターでコーディング時間を半減させる方法

よくある質問

Q. 対応しているCSSフィルターは何種類ですか？
blur（ぼかし）、brightness（明るさ）、contrast（コントラスト）、grayscale（グレースケール）、hue-rotate（色相回転）、invert（反転）、opacity（不透明度）、saturate（彩度）、sepia（セピア）の9種類に加え、drop-shadow（ドロップシャドウ）にも対応しています。
Q. 複数のフィルターを組み合わせられますか？
はい、複数のフィルターを同時に適用してCSSコードを生成できます。例えば、グレースケール化してからコントラストを上げるなど、フィルターの組み合わせでInstagram風の効果を作れます。
Q. 自分の画像でプレビューできますか？
はい、「画像をアップロード」ボタンから自分の画像をアップロードしてフィルター効果をプレビューできます。画像はブラウザ内で処理され、サーバーにアップロードされません。

関連ツール

デザイン

CSS Box Shadowジェネレーター

デザイン

CSSグラデーションジェネレーター

デザイン

カラーパレットジェネレーター

画像・OGP

画像比較スライダー

デザイン

CSSクリップパスジェネレーター

開発者

Zeronova avatar

Zeronova（ゼロノバ）

Product Manager / AI-Native Builder

19年以上のWeb/IT業界経験を持つPdMが、現場で本当に使えるツールを開発。登録不要・ブラウザだけで動作する無料ツールを93種類以上公開中。

@zeronova_labプロフィール →