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

ライブプレビュー付きのCSSフィルターエフェクトを生成します。ぼかし、明るさ、コントラスト、グレースケール、色相回転、反転、彩度、セピア、ドロップシャドウを調整します。

Presets

Filters

Blur0px

Brightness100%

Contrast100%

Grayscale0%

Hue Rotate0deg

Invert0%

Opacity100%

Saturate100%

Sepia0%

Preview

Original

Filtered

CSS Code

filter: none;

CSSフィルタージェネレーターの使い方

1フィルタースライダー(ぼかし、明るさ、コントラスト、など)を調整します。
2サンプル画像に適用されたエフェクトをリアルタイムで表示します。
3複雑なエフェクトのために複数のフィルターを組み合わせます。
4生成されたCSSフィルタープロパティをコピーします。

Zenovayアナリティクス

訪問者の本当の行動を知る。

リアルタイムの訪問者トラッキング
プライバシーファースト、クッキーバナーなし
2分でセットアップ

Zenovayを見る

よくある質問

CSSフィルタープロパティとは何ですか?▾

CSSフィルタープロパティは、ぼかし、明るさ、コントラスト、色シフトなどの視覚効果を要素に適用します。任意の要素で機能します:画像、div、テキスト、ビデオ、SVG。フィルターはリストされた順序で適用され、組み合わせることができます。2015年以来、すべての最新ブラウザーでサポートされています。

どのCSSフィルターが利用可能ですか?▾

標準フィルター:blur(px)、brightness(%)、contrast(%)、grayscale(%)、hue-rotate(deg)、invert(%)、opacity(%)、saturate(%)、sepia(%)、drop-shadow(x y blur color)。さらに、url()はカスタムエフェクト用のSVGフィルターを参照できます。

filterとbackdrop-filterの違いは何ですか?▾

filterは要素自体とそのコンテンツに効果を適用します。backdrop-filterは要素の背後の領域に効果を適用します(ガラスモーフィズムで使用)。たとえば、filter:blur(5px)は要素をぼかします。backdrop-filter:blur(5px)は半透明要素を通して見える任意のものをぼかします。

CSSフィルターはパフォーマンスに影響しますか?▾

フィルターはGPU加速をトリガーします。これは静的要素に効率的ですが、アニメーション化されると高コストになる可能性があります。blur()は最もパフォーマンス集約的なフィルターです。ベストプラクティス:大きな要素上の大きなぼかし半径を避ける、アニメーション用のwill-change:filterを使用する、多くの子孫を持つ要素のフィルタリングを避ける。

Instagramのようなフィルターを作成するにはどうすればよいですか?▾

複数のCSSフィルターを組み合わせて、写真効果を複製します。例「ナッシュビル」:brightness(1.1)contrast(1.2)saturate(1.35)sepia(0.25)。例「クラレンドン」:brightness(1.25)contrast(1.2)saturate(1.35)。2～4個のフィルターをスタックして、値を調整して一意の外観を作成します。

画像ツール