Die Entwickler-Tools, zu denen du jeden Tag greifst, alle an einem Ort.

Konverter, Formatter, Hashes, Validatoren und die kleinen Helfer, die du immer wieder öffnest, bleiben zusammen, statt zwischen Tabs verloren zu gehen.

GitHub

/ Tools

■

/ Tool-Finder

109 Tools

/ Box-Shadow-Generator

Presets

Schatten (2/5)

Schatten 1

Innen

Horizontal: 0px

Vertikal: 4px

Weichzeichnen: 6px

Ausbreitung: -1px

Farbe

Deckkraft: 10%

Schatten 2

Innen

Horizontal: 0px

Vertikal: 2px

Weichzeichnen: 4px

Ausbreitung: -2px

Farbe

Deckkraft: 10%

Vorschauhintergrund

Vorschau

CSS-Code

Tailwind-Arbitrary-Wert

/ Ausgewähltes Tool

■

Box-Shadow-Generator - kostenloses Generator-Tool

Visueller CSS-box-shadow-Generator mit Unterstützung für mehrere Schatten

■ 01

Was ist CSS Box Shadow?

Die CSS-Eigenschaft box-shadow fügt Schatteneffekte rund um den Rahmen eines Elements hinzu. Du kannst mehrere durch Kommas getrennte Schatten festlegen. Jeder Schatten wird durch horizontale und vertikale Versätze, Unschärfe- und Streuungsradius, Farbe und…

■ 02

Wie funktioniert es?

Box-Schatten werden durch mehrere Werte definiert: horizontaler Versatz (positiv verschiebt nach rechts), vertikaler Versatz (positiv verschiebt nach unten), Unschärferadius (größer bedeutet mehr Unschärfe), Streuungsradius (positiv erweitert, negativ verkleinert) und Farbe…

■ 03

Beispielfälle

Deckt Dezenter Schatten, Mittlere Erhöhung und Innenschatten ab, damit du gängige Ein- und Ausgaben schnell vergleichen kannst.

/ Verwandte Tools

/ Code

■

Quellcode des ausgewählten Tools, hier neben der Live-Version auf der rechten Seite gezeigt.

/ Quellcode

TypeScript

typescript

// No external dependencies needed - generates CSS box-shadow strings

interface Shadow {
  horizontal: number;
  vertical: number;
  blur: number;
  spread: number;
  color: string;
  opacity: number;
  inset: boolean;