CodesGeneratorenWebtools

CSS Shadow Generator

Schatten einfach selbst gestalten

Oft sind es die feinen Details, die ein Webdesign besonders machen. Mit dem CSS Shadow Generator verleihst du Elementen mehr Ausdruck, spielst mit Tiefe und entwickelst individuelle Schatteneffekte. Entdecke Gestaltungsmöglichkeiten und verwandle deine Ideen direkt in einsatzbereiten CSS-Code.

CSS Schatten generieren | Shadow CSS Generator

Gestalte Schatten mit Reglern, sieh jede Änderung sofort und kopiere den fertigen Code mit einem Klick.

Schattenart

Live-Vorschau

Dein CSS-Code

Schichten

Mehrere Schatten übereinander wirken oft natürlicher als ein einzelner. Wähle eine Schicht und passe sie unten an.

    Schatten einstellen

    Positiv schiebt den Schatten nach rechts, negativ nach links.

    Positiv schiebt den Schatten nach unten, negativ nach oben.

    Je höher der Wert, desto weicher sind die Ränder.

    Macht den Schatten größer (positiv) oder kleiner (negativ).

    100 % ist voll sichtbar, 0 % unsichtbar.

    Wähle eine Farbe oder tippe einen Wert wie #3452ff ein.

    Der Schatten liegt dann im Inneren des Elements, als wäre es eingedrückt.

    Vorschau anpassen

    Diese Einstellungen ändern nur die Vorschau und den Beispielcode, nicht den Schatten selbst.

    Wie stark die Ecken des Kastens abgerundet sind.

    Bis zu 24 Zeichen.

    Vorlagen

    Ein Klick übernimmt die Vorlage in den Generator. Danach kannst du alles frei verändern.

    Schatten im Web: kurz erklärt

    Ein Schatten lässt flache Flächen auf einer Webseite plastisch wirken. Karten scheinen über dem Hintergrund zu schweben, Buttons laden zum Klicken ein und Überschriften bekommen Tiefe. Mit CSS lässt sich das ganz ohne Bilder lösen: Der Schatten wird vom Browser berechnet, bleibt auf jedem Bildschirm gestochen scharf und lädt blitzschnell.

    Dabei bestimmen nur wenige Werte das Ergebnis: wohin der Schatten fällt, wie weich er ist, wie weit er sich ausbreitet und welche Farbe und Deckkraft er hat. Wer mehrere dezente Schichten kombiniert, erreicht oft einen viel natürlicheren Eindruck als mit einem einzigen harten Schatten. Dieser Generator zeigt jede Änderung sofort und liefert den passenden Code gleich mit.

    Häufige Fragen

    Was ist ein CSS-Schatten?

    CSS ist die Sprache, mit der Webseiten gestaltet werden. Ein CSS-Schatten ist eine Anweisung an den Browser, hinter einem Element oder einer Schrift einen weichen oder harten Schatten zu zeichnen. Dafür braucht es kein Bildprogramm, nur eine einzige Zeile Code.

    Wie benutze ich den Generator?

    Wähle oben die Schattenart, bewege dann die Regler und beobachte die Vorschau. Gefällt dir das Ergebnis, klicke auf „Code kopieren“ und füge den Code in das Stylesheet deiner Webseite ein. Wer nicht bei null anfangen möchte, startet mit einer Vorlage.

    Was ist der Unterschied zwischen den drei Schattenarten?

    Der Kastenschatten umgibt die rechteckige Box eines Elements, auch mit abgerundeten Ecken. Der Textschatten liegt hinter den Buchstaben. Der Umrissschatten folgt der sichtbaren Form, etwa bei Icons oder Bildern mit transparentem Hintergrund, und ignoriert die rechteckige Box.

    Wofür sind Versatz, Unschärfe und Ausbreitung da?

    Der Versatz verschiebt den Schatten seitlich und senkrecht und bestimmt so die scheinbare Richtung des Lichts. Die Unschärfe macht die Kanten weich. Die Ausbreitung vergrößert oder verkleinert den Schatten, bevor er weichgezeichnet wird. Sie gibt es nur beim Kastenschatten.

    Wozu dienen mehrere Schichten?

    In der Natur besteht ein Schatten aus einem engen, dunklen Kern und einem weiten, hellen Auslauf. Mit mehreren Schichten bildest du genau das nach. Auch Leuchteffekte und plastische Oberflächen entstehen, indem man einen hellen und einen dunklen Schatten kombiniert.

    Was bedeutet „nach innen werfen“?

    Normalerweise liegt der Schatten außerhalb eines Elements. Bei einem Innenschatten liegt er innerhalb des Rahmens, sodass die Fläche wie eingedrückt oder ausgehöhlt wirkt. Das eignet sich gut für Eingabefelder oder gedrückte Buttons.

    Ist das Werkzeug kostenlos, und werden meine Eingaben gespeichert?

    Das Werkzeug ist kostenlos und braucht keine Anmeldung. Alles wird direkt in deinem Browser berechnet. Deine Einstellungen werden weder an einen Server gesendet noch gespeichert und sind nach dem Neuladen der Seite wieder weg.

    Funktioniert der Code in jedem Browser?

    Ja. Schatten werden von allen aktuellen Browsern wie Chrome, Firefox, Edge und Safari unterstützt. Sehr viele oder sehr unscharfe Schichten auf großen Flächen können auf schwächeren Geräten etwas Rechenleistung kosten, verwende sie deshalb mit Maß.

    Ohne Anmeldung
    100 % kostenlos
    Datenschutzfreundlich
    Direkt im Browser
    Intuitiv bedienbar
    Interaktiv & vielseitig

    Hinweise und Feedback

    Wir sind bestrebt, unsere Website kontinuierlich zu aktualisieren, zu optimieren und weiterzuentwickeln.
    Sollte etwas nicht richtig funktionieren oder unvollständig sein kannst du zunächst einen Browser wie Firefox oder Chrome verwenden oder den Cache deines Browsers leeren.

    Wenn das Problem weiterhin besteht, dir veraltete Informationen oder fehlerhafte Funktionen, inhaltliche Unklarheiten oder Lücken auffallen oder du einen Verbesserungsvorschlag für uns hast, kannst du uns per E-Mail schreiben. Wir freuen uns über deine Hinweise und Vorschläge. Sie helfen uns, mögliche Verbesserungen und Optimierungen zu erkennen und bei der Weiterentwicklung unserer Website zu berücksichtigen.

    Share