ForHosting KIT · サイト取得・監視

CSS の box-shadow 値を生成

Q: 水平または垂直オフセットを負にできますか？

はい。 水平オフセットが負ならシャドウは左へ、垂直オフセットが負なら上へ移動します。

影のずれ、ぼかし、広がり、色を指定すると、貼り付けてすぐ使えるCSSのbox-shadowができます。4、8、16、0なら4px 8px 16px 0pxに色が続きます。ブラウザで無料で使えます。

無料
ブラウザで動作
登録不要
データは端末の外に出ません

無料で実行 API仕様を見る

ご利用方法ウェブAPIメールTelegramアプリ近日

計算例

入力した場合

オフセット x: 4
オフセット y: 8
ぼかし: 16
広がり: 0
色: rgb(15 23 42 / 0.25)

結果

ボックスシャドウ: 4px 8px 16px 0px rgb(15 23 42 / 0.25)

構文を手作業で組み立てることなく、5 つの明確な入力からコピー可能な CSS の box-shadow 値を作成できます。水平・垂直オフセット、ぼかし半径、広がり半径、CSS がサポートする色の値を指定してください。対話型デザイン、デザイントークンのパイプライン、コンポーネント生成、同じ入力から毎回同じ出力を必要とするテストに適しています。

水平・垂直オフセットでシャドウの位置を設定します

生成結果では、どちらも CSS ピクセルとして表されます。水平オフセットが正なら右へ、負なら左へ移動します。垂直オフセットが正なら下へ、負なら上へ移動し、ゼロならその軸の中央に配置されます。

デザインシステムが小数の間隔を使用する場合は、小数値も入力できます。ジェネレーターは検証済みの数値を勝手に丸めず、そのまま保持します。値を選ぶ際は、見た目上の光源も考慮してください。

通常、左上からの光は右下にシャドウを作ります。小さなオフセットは近く控えめな印象を与えやすく、大きなオフセットは要素を高く浮かせたり、意図的にグラフィカルに見せたりできます。このツールは、ぼかし、色、コンポーネントの種類から方向を推測しません。

したがって、値を利用者が完全に管理でき、スタイルシートやビルドで正確に再現できます。

ぼかしと広がりで柔らかさと範囲を調整します

ぼかし半径は、シャドウの最も濃い部分から透明になるまでの変化の滑らかさを調整します。ゼロにすると硬い輪郭になり、値を大きくすると柔らかく、見た目にも広いシャドウになります。広がり半径は、ぼかしを適用する前にシャドウの形を拡大します。

ゼロでは要素本来の範囲に沿い、正の値では全方向へ範囲が広がります。この機能は、負のぼかし値と負の広がり値を意図的に拒否します。各値は単位を付けない数値として入力してください。

返される CSS には、正しい順序で px 単位が追加されます。ぼかしと広がりは異なる調整項目であり、一方を増やしても他方の代わりにはなりません。控えめな UI シャドウには、小さめのオフセット、中程度のぼかし、わずかな広がりを組み合わせます。

強いフォーカスリングやポスター風の効果には、ぼかしをゼロにして広がりを大きくすると明瞭な輪郭を作れます。コントラストや周囲の色で柔らかさの見え方が変わるため、実際の面でプレビューしてください。

色を選び、生成された値を適用します

色名、16 進表記、rgb() や hsl() などの関数形式に対応します。自然なシャドウにはアルファ透明度が重要です。不透明な暗色は、明るい面では重く、色付きの背景では濁って見えることがあります。

ジェネレーターは前後の不要な空白を取り除き、括弧の対応を確認し、宣言を壊す文字を拒否します。応答は完全な宣言ではなく値だけなので、セレクターや別のシャドウレイヤーとの組み合わせはアプリケーション側で選択します。複数のシャドウが必要な場合は、各レイヤーを個別に生成して確認し、カンマで結合してください。

実行は決定論的で、ネットワーク、モデル、乱数、ストレージ、時計に依存しないため、スナップショットや再現可能なビルド自動化にも利用できます。

活用例

コンポーネント用シャドウトークンを作成します

構造化されたデザイン設定を、カード、メニュー、ダイアログ、フローティング操作部品向けの安定した box-shadow 値に変換します。

視覚的なスタイルエディターに組み込みます

スライダーとカラーピッカーの値をコピー可能な CSS に変換し、負のぼかし値や広がり値を拒否します。

再現可能なスタイルシートを生成します

決定論的な結果を、ビルドスクリプト、コンポーネント生成、スナップショットテスト、テーマ設定パイプラインで使用します。

よくある質問

水平または垂直オフセットを負にできますか？

はい。水平オフセットが負ならシャドウは左へ、垂直オフセットが負なら上へ移動します。

出力にはどの単位が使われますか？

4 つの数値はすべてピクセルで出力されます。単位の文字列を付けず、有限の数値を入力してください。

複数のシャドウレイヤーを生成できますか？

複数必要な場合は個別に生成して確認し、値をカンマで結合してください。

影のぼかしと広がりはどう違いますか？

ぼかしは縁のやわらかさを決め、0ならくっきりした縁、大きな値ほど広くやわらかい影になります。広がりはぼかす前に影の形を四方へ広げるもので、片方を増やしてももう片方の代わりにはなりません。

半透明の影にするにはどうしますか？

rgb(15 23 42 / 0.25)のように、透明度を含むrgb()やhsl()の色を指定します。不透明な濃い色は重く見えがちですが、半透明の色なら自然な影に見えます。

開発者向け — APIアクセス

このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

エンドポイント

POSThttps://api.kit.forhosting.com/web/box-shadow-generate

Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。

お使いのスタックから呼び出す

curl -X POST https://api.kit.forhosting.com/web/box-shadow-generate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"offset_x":4,"offset_y":8,"blur":16,"spread":0,"color":"rgb(15 23 42 / 0.25)"}'

const res = await fetch("https://api.kit.forhosting.com/web/box-shadow-generate", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "offset_x": 4,
    "offset_y": 8,
    "blur": 16,
    "spread": 0,
    "color": "rgb(15 23 42 / 0.25)"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/box-shadow-generate",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "offset_x": 4,
    "offset_y": 8,
    "blur": 16,
    "spread": 0,
    "color": "rgb(15 23 42 / 0.25)"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/box-shadow-generate", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"offset_x":4,"offset_y":8,"blur":16,"spread":0,"color":"rgb(15 23 42 / 0.25)"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"offset_x":4,"offset_y":8,"blur":16,"spread":0,"color":"rgb(15 23 42 / 0.25)"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/box-shadow-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "offset_x": 4,
  "offset_y": 8,
  "blur": 16,
  "spread": 0,
  "color": "rgb(15 23 42 / 0.25)"
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.box_shadow_generate",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

料金

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

制限

`timeout_sec`	30
`max_crawl_pages`	25

エラー

HTTP	コード	意味
`401`	`unauthorized`	APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
`402`	`insufficient_balance`	残高が不足しています。チャージ後に再度お試しください。
`404`	`unknown_type`	指定されたタスクタイプは存在しません。タイプ名を確認してください。
`429`	`rate_limited`	リクエストが多すぎます。しばらく待ってから再度お試しください。

技術的な注記

数値フィールドを検証し、ぼかしまたは広がりが負の場合は拒否したうえで、ピクセル単位の一貫した形式でシャドウを返します。

水平・垂直オフセットでシャドウの位置を設定します

最初に offset_x と offset_y を指定します。これらは要素を基準にシャドウをどの方向へどれだけ移動するかを決める値です。

ぼかしと広がりで柔らかさと範囲を調整します

そのため、非負の値という分かりやすい条件を保ち、予期しないスタイルを作る代わりに明確な invalid_input エラーを返します。

色を選び、生成された値を適用します

色フィールドには、空でない CSS の色を 1 つ指定できます。返される box_shadow フィールドには、水平オフセット、垂直オフセット、ぼかし半径、広がり半径、色という CSS の標準順序で 5 つの部分が入ります。この値を box-shadow プロパティに割り当てるほか、カスタムプロパティに設定したり、デザイントークンとして保存したりできます。1 回のリクエストで生成するレイヤーは 1 つです。

技術的な質問

生成される値 1 件の料金はいくらですか？

ブラウザーでの実行は無料です。成功した API リクエストは、生成された 1 項目につき $0.002 です。

ぼかしや広がりを負にできますか？

いいえ。どちらもゼロ以上である必要があり、それ以外の場合は invalid_input エラーを返します。

KITの完全なドキュメントを見る →

CSS の box-shadow 値を生成

無料で実行

計算例

水平・垂直オフセットでシャドウの位置を設定します

ぼかしと広がりで柔らかさと範囲を調整します

色を選び、生成された値を適用します

活用例

コンポーネント用シャドウトークンを作成します

視覚的なスタイルエディターに組み込みます

再現可能なスタイルシートを生成します

よくある質問

関連ツール

開発者向け — APIアクセス

エンドポイント

お使いのスタックから呼び出す

リクエスト例

レスポンス例

料金

制限

エラー

技術的な注記

水平・垂直オフセットでシャドウの位置を設定します

ぼかしと広がりで柔らかさと範囲を調整します

色を選び、生成された値を適用します

技術的な質問

ありがとう