コンテンツへスキップ
🛠️ToolsShed

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

blur、brightness、contrastなどCSSフィルター効果をライブプレビューで調整してCSSをコピーします。

フィルター

ブラー0px
明るさ100%
コントラスト100%
グレースケール0%
色相回転0deg
反転0%
不透明度100%
彩度100%
セピア0%

クリックしてプレビュー画像をアップロード

filter: none;

このツールについて

CSSフィルタージェネレーターは、ぼかし、明度、コントラスト、グレースケール、色相回転、反転、不透明度、彩度、セピアなど、標準的なCSSフィルタープロパティを使って画像エフェクトを視覚的に設計・調整するツールです。数値を推測したりCSSを試行錯誤で書く代わりに、このツールは各フィルタエフェクトがどのように見えるかをリアルタイムプレビューで表示し、望みの視覚効果を簡単に実現できます。

使い方は簡単で、画像をアップロードまたは貼り付けてから、各フィルタエフェクトのスライダーまたは入力フィールドを調整するだけです。値を変更すると、プレビューが即座に更新されるため、結果をすぐに確認できます。効果に満足したら、生成されたCSSコードをコピーしてスタイルシートに貼り付けてください。このアプローチにより、デザイン反復中の時間を節約でき、フィルタがブラウザ間で一貫してレンダリングされることが保証されます。

よくある質問

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.