CSS Box-Shadow-Generator
box-shadow einfügen, Ebenen visuell stapeln und CSS, Tailwind oder Bootstrap kopieren. Mehrlagig und Inset unterstützt. Teilbare URL. Im Browser erzeugt — nie gesendet.
Entwicklerhinweise
• Parser akzeptiert rgba/hex/hsl/benannte Farben; calc(), var(), oklch() und color-mix() werden in v1 abgelehnt. • Einzelmodus exportiert nur Ebene 1 und behält weitere Ebenen im Speicher — der Editor zeigt einen Hinweis. • rem-Export nutzt 16px Root; die Vorschau bleibt in px. • Vorschau-Form und Hintergrund sind URL-Status. • Nächstes Tailwind folgt der v4 --shadow-*-Skala, gleiche Ebenenanzahl, ±1px.
Optionen
- Ebenenmodus — Eine Ebene für einfache Schatten. Mehrebenen für bis zu acht gestapelte Schatten.
- Exportformat — CSS-Deklaration, --shadow-card, Tailwind oder Bootstrap mit Inline-Fallback.
- Einheit — px oder rem (16px Root) in der exportierten Zeichenkette.
- Tailwind-Zuordnung — Bei Tailwind-Export: shadow-* + shadow-[…], nur arbiträr, oder @theme-Token.
Verwandte CSS-Tools
Hub: Farb- & CSS-Tools. Ecken mit Border-Radius-Generator, Farben mit Farbkonverter oder CSS mit Minify CSS.
Box-Shadow-Generator FAQ
Lokaler Schatten-Editor zum Einfügen
Kann ich mehrschichtiges box-shadow aus DevTools einfügen?
Ja. Kommagetrennte Ebenen mit Inset und rgba/hex. Mehr als acht Ebenen werden gekürzt.
Was macht der Einzelebenen-Modus?
Blendet Hinzufügen/Entfernen aus und exportiert nur die erste Ebene. Weitere eingefügte Ebenen bleiben im Speicher — wechseln Sie zurück zu mehreren Ebenen, um sie zu bearbeiten.
Wie funktioniert der Tailwind-Export?
Nächste Utility + arbiträr, nur arbiträr, oder @theme --shadow-card.
Wird mein CSS hochgeladen?
Nein. Alles läuft im Browser.
Farb- & CSS-Tools
Lokal eingefügte WCAG-Kontrastprüfung mit moderner CSS-Farbsyntax — Paar- und Matrixansicht, nie hochgeladen.
Weitere Werkzeugkategorien entdecken
Minimieren
Verkleinern Sie Code und Ressourcen für die Produktion – minimieren Sie JavaScript, CSS, HTML, JSON und XML vor der Bereitstellung von gzip oder CDN.
Aufheben
Erweitern Sie minimierten oder komprimierten Code – entminifizieren Sie JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML und andere Formate beim Debuggen oder Überprüfen.
Konvertierung
Transformieren Sie Daten zwischen JSON, YAML, XML und CSV lokal – keine Server-Uploads.
Codierung
Kodieren oder dekodieren Sie Base64-, URL-Komponenten und HTML-Entitäten – nur clientseitig.
Serialisierung
Serialisieren und deserialisieren Sie PHP-Datenstrukturen neben JSON-Workflows.
JSON Werkzeuge
Validieren, formatieren, vergleichen und erkunden Sie JSON-Nutzlasten – ergänzend zu Minifiern und Konvertern.
SVG Werkzeuge
Vorschau anzeigen, mit SVGO optimieren, Daten exportieren URI, Größe ändern, verschönern, in JSX konvertieren und SVG validieren – alles in Ihrem Browser.
Verschönern
Machen Sie Code mit konsistenter Einrückung lesbar – verschönern Sie JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML und mehr in Ihrem Browser.
CSS-Präprozessoren
Kompilieren Sie SCSS oder LESS zu Standard-CSS im Browser — kombinieren Sie mit Beautify oder Minify für einen vollständigen Stylesheet-Workflow.
DevOps und Infrastruktur
Terraform HCL formatieren/validieren/minimieren, Dockerfile formatieren und lint, Docker Verfassen und .env-Validierung.
CI/CD
GitHub Aktionen und GitLab CI – formatieren Sie YAML und überprüfen Sie die Workflow-/Auftragsstruktur in Ihrem Browser.
Protokolle und Beobachtbarkeit
Zeilenorientierte JSON/NDJSON- und Nginx/Apache-Zugriffsprotokolle – formatieren, filtern, validieren und CSV/TSV.
Kubernetes
Multi-Doc-Manifeste, strukturelle Validierung, Ingress/Deployment-Starter und Helm-Werteformatierung.
Netzwerk / IP
CIDR, Subnetze und IPv4/IPv6-Helfer — im Browser.
Sicherheit und Token
JWKS, X.509-Zertifikate und Secrets-Scan – browserlokal.
API & Schemata
OpenAPI Tools zum Formatieren, Validieren und Flusen Ihrer Spezifikationen.
HTTP-Tools
cURL, HTTP-Nachrichten, URLs, HAR und Cookie/Set-Cookie lokal einfügen — formatieren und prüfen, nie gesendet.
SEO / Web-Tools
Meta-Tags, Open Graph und Twitter Card lokal erzeugen — Vorschauen aus Ihren Eingaben simuliert, nie von Ihrer Live-Site abgerufen.
Entwickler-Dienstprogramme
Zeitstempel, UUID, ULID, Nanoid, Cron, Passwörter, Regex, Slugify, Zahlenbasen, Groß-/Kleinschreibung, Textunterschied und chmod – alles clientseitig.
Text & Markdown
Wörter zählen, Markdown-TOC erzeugen und Zeilenlisten bereinigen — im Browser.
KI & LLM
Token-Zählung, Kostenschätzung und Kontextfenster — 100 % im Browser.
Testdaten
Synthetische Feldwerte für Fixtures und DB-Seed — zuerst reservierte Telefonnummern.
Barcode-Etiketten
Code 128, EAN-13 und UPC-A im Browser zeichnen — PNG- und SVG-Download, kein GS1-Lookup.