Kostenlos Online CSS-Schatten- und Grid-Generator
Gestalte CSS visuell, statt Zahlen zu raten. Im Box-Modus ziehst du Regler für Schattenversatz, Unschärfe, Ausbreitung, Eckenradius, Farbe und Deckkraft, mit optionalem innenliegendem Schatten, und siehst eine Live-Vorschau. Im Grid-Modus stellst du Spaltenzahl, Abstand, Elementzahl und Zeilenhöhe ein, um ein responsives Grid anzuordnen. Das passende CSS wird während der Arbeit erzeugt — kopiere es direkt in dein Stylesheet. Alles läuft in deinem Browser.
Werkzeug wird geladen…
CSS-Schatten- und Grid-Generator Schritt für Schritt
- Wähle „Box-Schatten & Radius“ oder „Grid-Layout“.
- Zieh an den Reglern, um den Effekt zu formen.
- Sieh zu, wie sich Vorschau und CSS live aktualisieren.
- Kopiere das generierte CSS in dein Projekt.
Fragen zu CSS-Schatten- und Grid-Generator
Welches CSS wird erzeugt?
Standardmäßiges, kopierfertiges CSS: eine .box-Regel mit background, border-radius und box-shadow oder eine .grid-Regel mit display:grid, grid-template-columns und gap. Für diese Eigenschaften sind in modernen Browsern keine Vendor-Prefixe nötig.
Kann ich das Grid-CSS auf einer echten Website nutzen?
Ja. Die Grid-Regel nutzt repeat() und fraktionale Spalten und ist damit responsiv. Füge sie in dein Stylesheet ein und platziere deinen Inhalt im Grid-Container.
Über CSS-Schatten- und Grid-Generator
Erzeuge CSS-Schatten und Grid-Layouts mit dem kostenlosen Online-Tool CSS-Schatten- und Grid-Generator. 100% im Browser, ohne Anmeldung oder Datei-Upload.
Diese Text- und Code-Werkzeuge bereinigen und wandeln Zeichenketten: Wörter zählen, Groß-/Kleinschreibung ändern, Zeilen deduplizieren, Base64 und URL kodieren/dekodieren, Entities escapen, hashen, JSON formatieren und zwei Versionen vergleichen.
Dieses Werkzeug läuft im Browser. Die Datei wird nicht hochgeladen. Alles läuft auf dem eingefügten Text, daher kannst du Code- oder Log-Ausschnitte sicher verarbeiten; nichts wird irgendwohin gesendet, und das Leeren des Feldes entfernt ihn aus dem Speicher.