Live · Inset · CSS-Kopie
CSS box-shadow Generator
Offset, Blur, Spread, Farbe, Decazität und Inset einstellen — Live-Vorschau, Presets und CSS-Kopie — 100 % im Browser.
Live-Vorschau
Inset / Outset
1-Klick CSS-Kopie
Volade Tools
CSS box-shadow Generator
Gastv1.0.0
2px
2px
5px
0px
20%
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);CSS box-shadow Generator — Volade
Live-CSS-Schatten: Offset, Blur, Spread, Inset — Ein-Klick-Kopie.
Prototypisieren Sie Drop- oder Inset-Schatten für Karten, Buttons und Felder. Volade zeigt Live-Vorschau und erzeugt box-shadow im Browser. Volade läuft lokal: DevTools → Network zeigt keine POST-Anfragen während Bearbeitung oder Generierung. Nach dem ersten Laden offline nutzbar — ideal in Klasse, Zug oder eingeschränkten Netzen. Benennen Sie Exporte mit Datum und Projektkontext für Lehrer-, Design- oder Data-Teams. Testen Sie zuerst eine Stichprobe vor Druck, Kundenfreigabe oder Massenimport. Gratis deckt den Alltag; V+ Premium entfernt Wasserzeichen und schaltet Pro-Exporte frei. Keine sensiblen Daten gehen an ein Volade-Backend — in jeder Sitzung im Browser prüfbar. CSS-Schattenwerte verlassen nie den Tab — Zwischenablage nur auf Ihren Klick. Volade läuft lokal: DevTools → Network zeigt keine POST-Anfragen während Bearbeitung oder Generierung. Nach dem ersten Laden offline nutzbar — ideal in Klasse, Zug oder eingeschränkten Netzen. Benennen Sie Exporte mit Datum und Projektkontext für Lehrer-, Design- oder Data-Teams. Testen Sie zuerst eine Stichprobe vor Druck, Kundenfreigabe oder Massenimport. Gratis deckt den Alltag; V+ Premium entfernt Wasserzeichen und schaltet Pro-Exporte frei. Keine sensiblen Daten gehen an ein Volade-Backend — in jeder Sitzung im Browser prüfbar. CSS-Schattenwerte verlassen nie den Tab — Zwischenablage nur auf Ihren Klick. Volade läuft lokal: DevTools → Network zeigt keine POST-Anfragen während Bearbeitung oder Generierung. Nach dem ersten Laden offline nutzbar — ideal in Klasse, Zug oder eingeschränkten Netzen. Benennen Sie Exporte mit Datum und Projektkontext für Lehrer-, Design- oder Data-Teams. Testen Sie zuerst eine Stichprobe vor Druck, Kundenfreigabe oder Massenimport. Gratis deckt den Alltag; V+ Premium entfernt Wasserzeichen und schaltet Pro-Exporte frei. Keine sensiblen Daten gehen an ein Volade-Backend — in jeder Sitzung im Browser prüfbar. CSS-Schattenwerte verlassen nie den Tab — Zwischenablage nur auf Ihren Klick. Volade läuft lokal: DevTools → Network zeigt keine POST-Anfragen während Bearbeitung oder Generierung. Nach dem ersten Laden offline nutzbar — ideal in Klasse, Zug oder eingeschränkten Netzen. Benennen Sie Exporte mit Datum und Projektkontext für Lehrer-, Design- oder Data-Teams. Testen Sie zuerst eine Stichprobe vor Druck, Kundenfreigabe oder Massenimport. Gratis deckt den Alltag; V+ Premium entfernt Wasserzeichen und schaltet Pro-Exporte frei. Keine sensiblen Daten gehen an ein Volade-Backend — in jeder Sitzung im Browser prüfbar. CSS-Schattenwerte verlassen nie den Tab — Zwischenablage nur auf Ihren Klick. Volade läuft lokal: DevTools → Network zeigt keine POST-Anfragen während Bearbeitung oder Generierung. Nach dem ersten Laden offline nutzbar — ideal in Klasse, Zug oder eingeschränkten Netzen. Benennen Sie Exporte mit Datum und Projektkontext für Lehrer-, Design- oder Data-Teams. Testen Sie zuerst eine Stichprobe vor Druck, Kundenfreigabe oder Massenimport. Gratis deckt den Alltag; V+ Premium entfernt Wasserzeichen und schaltet Pro-Exporte frei. Keine sensiblen Daten gehen an ein Volade-Backend — in jeder Sitzung im Browser prüfbar. CSS-Schattenwerte verlassen nie den Tab — Zwischenablage nur auf Ihren Klick. Volade läuft lokal: DevTools → Network zeigt keine POST-Anfragen während Bearbeitung oder Generierung.
Warum dieses Tool
Schatten-Generatoren sind oft Wegwerf und dünn dokumentiert. Wir wollten ein DS-taugliches, privates, wiederholbares Tool.
«Schatten in 20 Sekunden justieren und ins DS einfügen.»
Léa P.
Design System
«Inset + Vorschau-HG verhindert Dark-UI-Überraschungen.»
Marc T.
Front-End-Lead
«Nichts geht an Server — ideal für Air-Gap-Demos.»
Sofia N.
UX-Beraterin
Warum ein lokaler Schatten-Generator?
Schatten-Tokens gehören zur Markensprache. Experimente ohne Drittanbieter-Browser reduzieren Leakage.
Volade kombiniert präzise Slider, Presets, Vorschau-HG und SEO-Leitfaden für eine gemeinsame Referenz.
Wichtige Punkte
- Steuern Sie X, Y, Blur, Spread in Pixeln.
- Inset für Innenschatten aktivieren.
- Gratis-Soft; andere mit V+.
- box-shadow-Deklaration mit einem Klick kopieren.
- Alles bleibt lokal bis zum bewussten Kopieren.
So erhalten Sie Ihr CSS
Vier Schritte vom Preset zur eingefügten Deklaration.
In 4 Schritten
- 1
Preset wählen
Soft gratis oder Material / Neo / Glow mit V+.
- 2
Slider einstellen
Offset, Blur, Spread, Farbe, Deckkraft, Inset.
- 3
Vorschau prüfen
Hintergrund wechseln, Kontrast beurteilen.
- 4
CSS kopieren
Ein Klick, dann ins Stylesheet einfügen.
Anwendungsfälle
Kontexte, in denen Schatten exakt sein muss.
1
UI-Karten
Elevation über Komponenten eines Screens angleichen.
2
Buttons & CTAs
Tiefe ohne Textkontrastverlust.
3
Inset-Felder
Eingefallene Inputs für Formulare und Suche.
4
Design-Tokens
Referenzschatten vor dem DS-Commit dokumentieren.
Volade vs. Wettbewerber
CSSMatic, Neumorphism.io, SmoothShadow, HTML-CSS-JS, Shadows Brumm und CodePen sind nützliche Playgrounds mit anderen Schwerpunkten.
Volade priorisiert Produktgeschwindigkeit, Presets und Docs im Tool-Ökosystem.
Nichts geht an Server
Parameter bleiben im Tab. Nur Kopieren schreibt in die lokale Zwischenablage.
| Kriterium | Volade | CSSMatic | Neumorphism.io | SmoothShadow | HTML-CSS-JS | Shadows Brumm | CodePen |
|---|---|---|---|---|---|---|---|
| 100 % clientseitig | Ja | Ja | Ja | Ja | Ja | Ja | Teilweise |
| Gratis Soft-Preset | Ja | Teilweise | Teilweise | Teilweise | Teilweise | Teilweise | Teilweise |
| Inset-Modus | Ja | Ja | Ja | Ja | Ja | Teilweise | Teilweise |
| Einstellbarer Vorschau-HG | Ja | Teilweise | Teilweise | Teilweise | Teilweise | Teilweise | Teilweise |
| 1-Klick-CSS-Kopie | Ja | Ja | Ja | Ja | Ja | Ja | Teilweise |
| Docs + Tool-Ökosystem | Ja | Nein | Nein | Nein | Nein | Nein | Teilweise |
Indikative Gegenüberstellung — Juli 2026. „Teilweise“ = eingeschränktes Feature oder Konto nötig.
Volade richtet sich an wiederholte, sensible Workflows mit Historie und Export — nicht an Einzelklicks.
Funktionen nach Tarif
Gratis: Slider, Soft, Inset, Kopie. V+: Premium-Presets, saubere Kopie, Verlauf.
| Funktion | Gratis | V+ Premium |
|---|---|---|
| Live box-shadow-Vorschau | ||
| Offset, Blur, Spread | ||
| Farbe + Deckkraft | ||
| Inset-Modus | ||
| Preset Soft | ||
| 1-Klick-CSS-Kopie | ||
| Presets Material / Neo / Glow | — | |
| Kopie ohne Wasserzeichen | — | |
| Variantenverlauf | — |
Gratis deckt den Alltag. V+ erweitert Export, Raster und Transformationen.
Ihre Daten verlassen nie den Browser
Kein CSS-Upload. Network beim Einstellen: keine Schatten-Telemetrie.
Best Practices
Für produktionsreife Schatten.
- Blur größer als Spread für natürliches Bild.
- Kontrast nach farbigen Schatten erneut prüfen.
- Token im Commit benennen (elevation-sm).
- Vor dem Merge auf hellen und dunklen Gründen testen.
- Zu opake Schatten flachen die Hierarchie ab.
Im Zweifel zuerst an einer Stichprobe testen, bevor Sie drucken, teilen oder importieren.
Wussten Sie schon?
1×Klick zum Kopieren
4Presets
0Netzwerkanfragen
Häufige Fragen
Inset, Presets, CSS-Kopie, Datenschutz und Vergleich — kurze Antworten.
Nein. Offset, Blur, Spread, Farbe, Deckkraft und Inset bleiben lokal bis zum Kopieren.
DevTools → Network bleibt während der Einstellung leer. Kein Volade-Backend erhält CSS-Werte. Volade läuft lokal: DevTools → Network zeigt keine POST-Anfragen während Bearbeitung oder Generierung. Testen Sie zuerst eine Stichprobe vor Druck, Kundenfreigabe oder Massenimport. CSS-Schattenwerte verlassen nie den Tab — Zwischenablage nur auf Ihren Klick. Benennen Sie Exporte mit Datum und Projektkontext für Lehrer-, Design- oder Data-Teams.
V+ Premium
Schatten bereit fürs Design System
Premium-Presets, saubere Kopie und Verlauf — in ganz Volade.
14 Tage testen. Jederzeit kündbar.
Weiterführende Links
Stand: Juli 2026.