Erstellen Sie einen CSS-box-shadow-Wert
Geben Sie Versatz, Unschärfe, Ausdehnung und Farbe eines Schattens an und erhalten Sie einen kopierfertigen CSS-box-shadow: Aus 4, 8, 16 und 0 wird 4px 8px 16px 0px, gefolgt von Ihrer Farbe. Kostenlos in Ihrem Browser.
- Kostenlos
- Läuft in Ihrem Browser
- Ohne Anmeldung
- Ihre Daten bleiben auf Ihrem Gerät
Im Browser ausführen – kostenlos
Rechenbeispiel
- Versatz x
- 4
- Versatz y
- 8
- Unschärfe
- 16
- Ausdehnung
- 0
- Farbe
- rgb(15 23 42 / 0.25)
- Box-Shadow
- 4px 8px 16px 0px rgb(15 23 42 / 0.25)
Erstellen Sie aus fünf eindeutigen Eingaben einen kopierfertigen CSS-box-shadow-Wert, ohne die Syntax von Hand zusammensetzen zu müssen. Geben Sie horizontalen und vertikalen Versatz, Weichzeichnungsradius, Ausbreitungsradius und einen unterstützten CSS-Farbwert an. Der Generator prüft die Zahlenfelder, weist negative Werte für Weichzeichnung oder Ausbreitung zurück und liefert einen einheitlich formatierten Schatten in Pixeln. Er eignet sich für interaktive Designarbeiten, Design-Token-Pipelines, Komponentengeneratoren und Tests, die bei derselben Eingabe jedes Mal dasselbe Ergebnis benötigen.
Legen Sie die Position durch horizontalen und vertikalen Versatz fest
Im erzeugten Ergebnis werden beide Angaben in CSS-Pixeln ausgegeben. Ein positiver horizontaler Versatz bewegt den Schatten nach rechts, ein negativer Wert nach links. Ein positiver vertikaler Versatz bewegt ihn nach unten, ein negativer nach oben.
Mit null bleibt der Schatten auf der jeweiligen Achse zentriert. Die Felder dürfen Dezimalwerte enthalten, wenn Ihr Designsystem mit Bruchteilen arbeitet. Der Generator bewahrt die geprüfte Zahl, anstatt sie unbemerkt zu runden.
Berücksichtigen Sie bei der Wahl des Versatzes die wahrgenommene Lichtquelle: Licht von links oben erzeugt gewöhnlich einen Schatten rechts unten. Kleine Abstände wirken meist nah und dezent, große können ein Element stark angehoben oder bewusst grafisch erscheinen lassen. Das Werkzeug leitet die Richtung weder aus der Weichzeichnung noch aus Farbe oder Komponententyp ab.
Dadurch behalten Sie die vollständige Kontrolle und können die Werte in Stylesheets und Builds exakt reproduzieren.
Steuern Sie Weichheit und Fläche mit Weichzeichnung und Ausbreitung
Der Weichzeichnungsradius steuert, wie allmählich der Schatten von seinem kräftigsten Bereich in Transparenz übergeht. Null erzeugt eine harte Kante, während größere Werte den Schatten weicher und optisch breiter machen. Der Ausbreitungsradius vergrößert die Schattenform, bevor die Weichzeichnung angewendet wird.
Null folgt der ursprünglichen Schattenfläche des Elements; ein positiver Wert erweitert sie auf allen Seiten. Diese Funktion weist negative Werte für Weichzeichnung und Ausbreitung bewusst zurück. Geben Sie jeden Wert als reine Zahl ein; das zurückgegebene CSS ergänzt px-Einheiten in der erforderlichen Reihenfolge.
Weichzeichnung und Ausbreitung sind unterschiedliche Regler, sodass eine Erhöhung des einen die des anderen nicht ersetzt. Für einen zurückhaltenden Oberflächenschatten kombinieren Sie mäßigen Versatz mit mittlerer Weichzeichnung und wenig oder keiner Ausbreitung. Für einen deutlichen Fokusring oder Plakateffekt können null Weichzeichnung und größere Ausbreitung eine scharfe Kontur bilden.
Prüfen Sie das Ergebnis auf der tatsächlichen Oberfläche, weil Kontrast und umgebende Farben die wahrgenommene Weichheit verändern.
Wählen Sie eine Farbe und verwenden Sie den erzeugten Wert
Das Farbfeld akzeptiert genau einen nicht leeren CSS-Farbwert, darunter Farbnamen, Hexadezimalnotationen und Funktionsformen wie rgb() oder hsl(). Alphatransparenz ist für natürliche Schatten oft wichtig, denn eine deckende dunkle Farbe kann auf hellen Flächen schwer und auf farbigen Hintergründen trüb wirken. Der Generator entfernt unnötige äußere Leerzeichen, prüft ausgeglichene Klammern und weist Zeichen zurück, die eine Deklaration beschädigen könnten.
Weisen Sie diesen Wert der Eigenschaft box-shadow zu, setzen Sie ihn in eine benutzerdefinierte Eigenschaft ein oder speichern Sie ihn als Design-Token. Die Antwort ist ein Wert und keine vollständige Deklaration; Ihre Anwendung bestimmt weiterhin den Selektor und eine mögliche Kombination mit weiteren Schattenebenen. Erzeugen und prüfen Sie bei mehreren Schatten jede Ebene einzeln, bevor Sie die Werte durch Kommas verbinden.
Die Ausführung ist deterministisch und unabhängig von Netzwerk, Modell, Zufall, Speicher und Uhr. Damit eignet sie sich für Snapshots und wiederholbare Build-Automatisierungen.
Anwendungsfälle
Erstellen Sie ein Schatten-Token für Komponenten
Wandeln Sie strukturierte Designvorgaben in einen stabilen box-shadow-Wert für Karten, Menüs, Dialoge und schwebende Bedienelemente um.
Betreiben Sie einen visuellen Stil-Editor
Überführen Sie Regler- und Farbwählerwerte in kopierbares CSS und weisen Sie negative Weichzeichnungs- oder Ausbreitungswerte zurück.
Erzeugen Sie reproduzierbare Stylesheets
Nutzen Sie das deterministische Ergebnis in Build-Skripten, Komponentengeneratoren, Snapshot-Tests oder Konfigurationspipelines für Themes.
Häufige Fragen
Darf der horizontale oder vertikale Versatz negativ sein?
Ja. Ein negativer horizontaler Versatz bewegt den Schatten nach links, ein negativer vertikaler Versatz nach oben.
Welche Einheiten verwendet die Ausgabe?
Alle vier Zahlenwerte werden in Pixeln ausgegeben. Geben Sie endliche reine Zahlen ohne Einheitentext ein.
Erzeugt das Werkzeug mehrere Schattenebenen?
Nein. Jede Anfrage erzeugt eine Ebene. Erstellen Sie Ebenen getrennt und verbinden Sie geprüfte Werte mit Kommas, wenn Ihr CSS mehrere Schatten benötigt.
Was ist der Unterschied zwischen Unschärfe und Ausdehnung beim Schatten?
Die Unschärfe macht den Rand weich: Bei null bleibt er hart, größere Werte ergeben einen weicheren, breiteren Verlauf. Die Ausdehnung vergrößert die Schattenform vor der Unschärfe nach allen Seiten, deshalb ersetzt das eine nicht das andere.
Wie mache ich einen Schatten halbtransparent?
Verwenden Sie eine Farbe mit Transparenz, etwa einen rgb()- oder hsl()-Wert mit Alphakanal wie rgb(15 23 42 / 0.25). Eine deckende dunkle Farbe wirkt oft schwer, ein durchscheinender Ton dagegen wie ein natürlicher Schatten.
Verwandte Tools
Für Entwickler — API-Zugang
Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.
Endpunkt
Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.
Aufruf aus Ihrem Stack
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)Beispiel-Anfrage
{
"offset_x": 4,
"offset_y": 8,
"blur": 16,
"spread": 0,
"color": "rgb(15 23 42 / 0.25)"
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.box_shadow_generate",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.
Preis
Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.
Limits
timeout_sec | 30 |
max_crawl_pages | 25 |
Fehler
| HTTP | Code | Bedeutung |
|---|---|---|
401 | unauthorized | Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer). |
402 | insufficient_balance | Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht. |
404 | unknown_type | Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog. |
429 | rate_limited | Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt. |
Technische Hinweise
Legen Sie die Position durch horizontalen und vertikalen Versatz fest
Beginnen Sie mit offset_x und offset_y. Diese Werte bestimmen, wie weit der Schatten relativ zum Element verschoben wird.
Steuern Sie Weichheit und Fläche mit Weichzeichnung und Ausbreitung
Sie erhalten dadurch eine einfache Vorgabe für nicht negative Zahlen und bei Verstößen einen eindeutigen invalid_input-Fehler statt eines unerwarteten Stils.
Wählen Sie eine Farbe und verwenden Sie den erzeugten Wert
Er gibt ein Feld box_shadow mit fünf Bestandteilen in der kanonischen CSS-Reihenfolge zurück: horizontaler Versatz, vertikaler Versatz, Weichzeichnungsradius, Ausbreitungsradius und Farbe. Pro Anfrage entsteht eine Ebene.
Technische Fragen
Was kostet ein erzeugter Wert?
Die Ausführung im Browser ist kostenlos. Eine erfolgreiche API-Anfrage kostet $0.002 je erzeugtem Element.
Dürfen Weichzeichnung oder Ausbreitung negativ sein?
Nein. Diese Funktion verlangt für beide Werte null oder mehr und gibt andernfalls einen invalid_input-Fehler zurück.