無料オンラインCSSフィルタージェネレーター

8種類のフィルターです：brightness()、contrast()、saturate()、hue-rotate()、blur()、grayscale()、sepia()、invert()。これらはこの順序で1つの filter プロパティに結合され、デフォルト値（効果なし）のフィルターは省略されます。

現時点ではできません——プレビューは固定の内蔵グラデーション画像を使用します。生成されたフィルター CSS をコピーして、自分のプロジェクトで実際の画像に適用し、その効果を確認してください。

:hover にフィルターを追加します：.image { filter: none; transition: filter 0.3s; } .image:hover { filter: brightness(1.2) contrast(1.1); } これにより、マウスホバー時に滑らかなフィルター遷移が作れます。

box-shadow は要素のボックス（矩形）に適用されます。drop-shadow() フィルターは要素の実際の透明度に沿った形状に追従します——透明な PNG 画像に最適で、影が画像の輪郭にフィットします。このツールには drop-shadow コントロールは含まれていません。必要な場合はコピーした CSS に手動で追加してください。

できます。CSS フィルターはトランジションやキーフレームアニメーションでアニメーション化できます：@keyframes pulse { 0% { filter: brightness(1); } 50% { filter: brightness(1.5); } 100% { filter: brightness(1); } }

Completely safe. The CSSフィルタージェネレーター processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.

Yes. The CSSフィルタージェネレーター is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.

Yes. The CSSフィルタージェネレーター is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.