デザイン・CSS
CSS のグラデーション・影・カラースケールを生成し、コントラストを確認します。コピーしてすぐ使えるコード。
/
5個のツールコードを画像に
コードスニペットを、ブラウザ内で構文ハイライト付きの美しい PNG 画像に変換します。アップロードは不要です。
カラーコントラストチェッカー
前景色と背景色の WCAG コントラスト比をチェックし、通常テキストと大きいテキストで AA と AAA に適合するかを確認します。
カラーシェード生成ツール
1 つの基準 HEX 色を Tailwind 風の 50〜950 シェードスケールに変換し、各段階を色見本とコピー可能な HEX 値で表示します。
CSS box-shadow ジェネレーター
オフセット・ぼかし・広がり・色・inset の各コントロールで多重レイヤーの CSS box-shadow を作り、すぐ使える box-shadow プロパティをコピーできます。
CSS グラデーション生成ツール
色の停止点と角度を指定して線形・放射・円錐の CSS グラデーションを作り、リアルタイムに確認して background ルールをコピーできます。