# CSS-Box-Shadow-Generator

> Zeige einen CSS-Box-Shadow in der Vorschau an und kopiere den Code.

[Open tool](https://www.toolcabana.com/de/box-shadow) · [Entwicklung und Daten](https://www.toolcabana.com/de/category/developer-and-data)

Tool ID: box-shadow. Requested language: de. Description language: de. Complete guide translation: yes.

## Overview (en)

Color CSS shadow generator builds a box-shadow declaration from horizontal and vertical offsets, blur, spread, a shadow color and an opacity from 0 to 1, with an optional inset shadow. It shows a live preview card and outputs a ready-to-copy CSS line that writes the color as rgba.

## Supported tasks (de)

Zeige einen CSS-Box-Shadow in der Vorschau an und kopiere den Code.

## Steps (de)

1. Passe die Werte an; ein erstes Ergebnis wird aus den Standardwerten berechnet.
2. Ändere die Grundeinstellungen oder öffne den Erweiterten Modus, um das Ergebnis fein abzustimmen.
3. Prüfe dein Ergebnis und kopiere es oder lade es herunter. Pausiere Live-Ergebnisse, um manuell auszuführen. Quellen oder einzelne Einstellungen über 20.000 Zeichen erfordern eine explizite Ausführung.

## Settings

- Horizontaler Versatz (px) (de; key: x; type: number)
- Vertikaler Versatz (px) (de; key: y; type: number)
- Weichzeichnen (px) (de; key: blur; type: number); minimum: 0; maximum: 200
- Ausbreitung (px) (de; key: spread; type: number)
- Schattenfarbe (de; key: color; type: color)
- Deckkraft (de; key: opacity; type: range); minimum: 0; maximum: 1
- Inset (de; key: inset; type: checkbox)

## Limitations (de)

Verwende endliche Zahlen, gültige Datumsangaben und die in jedem Bedienelement angezeigten Bereiche. Ungültige Werte erzeugen einen Fehler ohne herunterladbares Ergebnis.

## Example input

```text
Hello ToolCabana
```

## Privacy and connections (de)

Dieser Vorgang verarbeitet seine Quelle in deinem Browser. Kopieren und Herunterladen sind ausdrückliche Aktionen; die Quelleingabe wird nicht in einem Konto oder Verlauf gespeichert.

## Questions (de)

### How do I make an inset box shadow in CSS?

Turn on the Inset option. The generated declaration then starts with the inset keyword, and the preview card shows the shadow inside its edges instead of outside.

### How do I set the transparency of a CSS shadow?

Use the Opacity slider, from 0 to 1 in steps of 0.01. The chosen color is converted to rgba with that alpha value, so the default of 0.15 gives a soft shadow.

### What is the maximum blur for the shadow generator?

Blur accepts whole pixel values from 0 to 200. The horizontal and vertical offsets and spread can be negative, which moves or shrinks the shadow.

### Wo wird meine Eingabe verarbeitet?

Dieser Vorgang verarbeitet seine Quelle in deinem Browser. Kopieren und Herunterladen sind ausdrückliche Aktionen; die Quelleingabe wird nicht in einem Konto oder Verlauf gespeichert.

### Welche Eingabelimits gelten?

Verwende endliche Zahlen, gültige Datumsangaben und die in jedem Bedienelement angezeigten Bereiche. Ungültige Werte erzeugen einen Fehler ohne herunterladbares Ergebnis.

## Related tools

- [Certificate decoder](https://www.toolcabana.com/de/certificate-decoder)
- [API request builder](https://www.toolcabana.com/de/api-request)
- [JSON to Dart model](https://www.toolcabana.com/de/json-to-dart)
- [JSON to TypeScript](https://www.toolcabana.com/de/json-to-typescript)