CSSグラデーション、シャドウ、角丸の生成や、Web用のカラーコントラストチェックができます。 17個のツール — ブラウザ内で完結.
文字色と背景色の組み合わせがWCAGアクセシビリティのコントラスト基準を満たしているかを確認します。
線形(リニア)または放射状(ラジアル)のCSSグラデーションを視覚的に作成し、コードをコピーします。
スライダー操作でCSSのbox-shadowを視覚的にデザインし、生成されたコードをコピーします。
非対称な形も含めて角丸を視覚的にデザインし、CSSコードをコピーします。
指定したルートフォントサイズに基づいて、pxとrem単位を相互に変換します。
画像から主要な色を自動抽出し、HEX・RGB・CSSコードで表示します
コードを貼り付けるだけで、グラデーション背景とタイトルバー付きの美しい画像に変換し、そのまま共有できます
色覚異常(1型・2型・3型色覚、全色盲)を持つ人にあなたの画像がどう見えるかを確認できます
既製の図形(円・三角形・星・吹き出しなど)を選んで、clip-pathのCSSコードをコピーします。
2つの制御点をドラッグして独自のモーションイージングカーブを視覚的にデザインし、cubic-bezierのコードをコピーします。
すりガラス風のカード効果を視覚的にデザインし、そのまま使えるCSSコードをコピーします。
GridまたはFlexboxのレイアウトをライブプレビューで視覚的にデザインし、そのまま使えるCSSコードをコピーします。
入力したテキストを、複数の手書きスタイルから選んで罫線入り用紙に手書き風に描いた画像に変換します。
ランダムな有機的ブロブ形状、またはシームレスに繰り返す背景パターンをSVGとして生成し、コピーまたはダウンロードできます。
CSSアニメーション(フェード・スライド・ズーム・バウンス・回転・反転)を視覚的にデザインし、すぐ使える@keyframesコードを取得します。
ベースカラーを選ぶだけで、調和のとれたカラーパレット(補色・類似色・トライアド・テトラード・単色)を生成します。
ワンクリックで柔らかく複数点のメッシュグラデーション背景を作成し、そのまま使えるCSSコードをコピーします。