影box-shadowX・Y・ぼかし・広がり・不透明度・色をスライダーで調整して box-shadow のCSSを生成。inset で内側の影にも切り替えられます。自然に見せるコツも解説つき。
文字の影text-shadow見出しやバナー文字を目立たせる text-shadow を、X・Y・ぼかし・不透明度・色のスライダーで作成。プレビューで実際の見た目を確認できます。
グラデーションgradient角度と開始色・終了色を選ぶだけで linear-gradient のCSSを生成。0deg は下から上、90deg は左から右。背景やボタンの装飾に使えます。
ストライプstripe2色と帯の太さ・角度を決めるだけで縞模様の背景CSSを生成。0deg で横縞、90deg で縦縞、45deg で斜めストライプになります。
角丸border-radius左上・右上・右下・左下の角丸を px で個別に指定してプレビュー。4つとも同じ値なら1つにまとめて出力します。大きな値でカプセル型や円も作れます。
三角形triangle要素の枠線を使った定番テクニックで、画像なしの三角形をCSSだけで作成。正三角形は高さを自動計算、二等辺は底辺と高さを自由に設定。吹き出しの矢印などに便利です。
変形transform回転・拡大縮小・傾き・移動を組み合わせて transform のCSSを生成。レイアウトに影響しにくくアニメーションと相性が良いプロパティです。
画像フィルターfilterぼかし・明るさ・コントラスト・グレースケール・セピア・彩度・色相回転をスライダーで調整して filter のCSSを生成。写真の雰囲気調整やホバー演出に。
ボタンbutton背景色・文字色・角丸・余白・文字サイズを決めると、そのまま使えるボタンのCSSを .button クラスの形で出力します。
アニメーションanimationフェード・スライド・ズーム・回転・バウンス・パルス・シェイクの7種から選び、長さと速度変化を調整。@keyframes と animation 指定の両方を出力します。再生ボタンで動作確認可能。
イージングcubic-bezier制御点を動かして cubic-bezier のイージング曲線を作成。ease / in / out / in-out のプリセット付き。再生ボタンで実際の動きを確認できます。