6XC

CSS Filterジェネレーター

blur、brightness、contrast、grayscale、hue-rotate、saturate、sepia、invertをライブプレビューで組み合わせます。

1,017回閲覧

6XC

filterプロパティとは

filterは画像編集のような効果をあらゆる要素に適用できます — 写真、動画、さらにはレイアウト全体にも。複数の関数を1つの宣言でつなげることができ、filter: brightness(110%) contrast(120%) saturate(130%)は鮮やかな「インスタグラム風」の見た目に、grayscale(100%)は定番のモノクロ調に、hue-rotateは新しい素材を用意せずに色味だけを変えられます。

よくある質問

filterはパフォーマンスに影響しますか?

ほとんどのフィルターはGPUで高速化されており、少数の要素に使う分には問題ありません。最も負荷が高いのはblurです — 特にモバイルでは、大きな面に対して半径を小さめに保ちましょう。

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

filterは要素自体とその内容に効果を適用します。backdrop-filterは要素の背後に見えているものに効果を適用します — これがグラスモーフィズムで使われている仕組みです。

関連ツール

CSSグラデーション ジェネレーター ライブプレビューを見ながら線形・放射状・円錐形のCSSグラデーションをデザインし、コードをコピーできます。 使ってみる CSS Box Shadow(ボックスシャドウ)ジェネレーター オフセット・ぼかし・広がり・色・不透明度・内側影(inset)をビジュアルに調整し、ライブプレビューで影をデザインします。 使ってみる CSS Border Radiusジェネレーター 各角を個別に、または一括でpxか%で丸め、ライブプレビューとコピー可能なCSSを確認できます。 使ってみる CSSテキストシャドウ ジェネレーター オフセット・ぼかし・色・不透明度を調整してtext-shadowをデザインし、サンプルテキストでライブプレビューできます。 使ってみる