CSS計算ツール

gradient CSSグラデーション ジェネレーター ライブプレビューを見ながら線形・放射状・円錐形のCSSグラデーションをデザインし、コードをコピーできます。 使ってみるchevron_right layers CSS Box Shadow(ボックスシャドウ)ジェネレーター オフセット・ぼかし・広がり・色・不透明度・内側影(inset)をビジュアルに調整し、ライブプレビューで影をデザインします。 使ってみるchevron_right rounded_corner CSS Border Radiusジェネレーター 各角を個別に、または一括でpxか%で丸め、ライブプレビューとコピー可能なCSSを確認できます。 使ってみるchevron_right text_format CSSテキストシャドウ ジェネレーター オフセット・ぼかし・色・不透明度を調整してtext-shadowをデザインし、サンプルテキストでライブプレビューできます。 使ってみるchevron_right border_style CSS Border(枠線)ジェネレーター 太さ・スタイル(solid、dashed、dotted、double…)・色・角丸をビジュアルに調整し、ライブプレビューで枠線をデザインします。 使ってみるchevron_right blur_on CSSグラスモーフィズムジェネレーター ライブプレビューでガラス(グラスモーフィズム)効果をデザイン — ぼかし、透明度、色調、境界線を調整して、CSSをコピーしましょう。 使ってみるchevron_right swap_vert CSSスクロールバー生成ツール ライブプレビューを見ながらカラフルなカスタムスクロールバーをデザインし、CSSをコピー — WebKitとFirefoxの両方に対応。 作成するchevron_right transform CSSトランスフォーム ジェネレーター 回転・拡大縮小・移動・傾斜を視覚的に組み合わせ、生成されたtransformのCSSをコピーできます。 使ってみるchevron_right speed CSSトランジション ジェネレーター プロパティ・時間・タイミング関数・遅延を設定してtransitionを組み立て、ワンクリックでライブテストできます。 使ってみるchevron_right photo_filter CSS Filterジェネレーター blur、brightness、contrast、grayscale、hue-rotate、saturate、sepia、invertをライブプレビューで組み合わせます。 使ってみるchevron_right animation CSSアニメーションジェネレーター キーフレームのプリセット（回転、パルス、バウンス、シェイク、フェード、スライド）を選び、再生時間と繰り返し回数を調整して@keyframesとクラスをコピー。 使ってみるchevron_right view_column CSS Flexbox 遊び場 flex-direction、justify-content、align-items、wrap、gapをライブのボックスで調整し、コンテナのCSSをコピーします。 使ってみるchevron_right mouse CSS カーソル選択ツール すべてのCSSカーソル値にマウスを乗せてその場で確認 — クリックするとcursor宣言をコピーできます。 使ってみるchevron_right view_week CSS 段組みジェネレーター 列数・列間の余白・仕切り線を新聞のような段組みレイアウトで調整 — ライブプレビューとCSSコード付き。 使ってみるchevron_right format_size タイポグラフィスケール ジェネレーター 基準サイズと比率からモジュラータイポグラフィスケールを生成 — ライブプレビュー、px/rem表、コピー可能なCSS変数付き。 使ってみるchevron_right text_fields 流体タイポグラフィ計算 — CSS clamp() 2つのビューポート幅の間でフォントサイズを滑らかに変化させるCSS clamp()を生成 — ブレイクポイント不要。 計算するchevron_right view_column CSSグリッドカラム計算機 コンテナ幅・カラム数・ガター(溝)からカラム幅を計算 — コピーしてすぐ使えるCSS Gridコードと、複数カラムにまたがるスパン幅付き。 計算するchevron_right