ToolAtlas
FavoritenZuletzt

Box-Shadow-Generator

Verarbeitung in diesem Browser

Textlimit: 2000000 Zeichen

Dieses Tool lädt Ihre Eingabe nicht hoch.

Eine oder mehrere Schattenlagen als CSS. Kein Material-Design-Kit.

Card heben, Button tieflegen: box-shadow zum Kopieren. Kein PNG-Drop-Shadow.

Sie stellen Versatz, Weichzeichner, Ausbreitung und Farbe ein. Das Ergebnis ist eine CSS-Zeile.

CSS zum Kopieren

Verlauf: CSS-Verlauf. Maße: CSS-Einheiten.

Kein Bildfilter

Wir rendern keinen Schatten ins Foto. Raster-Jobs bleiben der Image-Cluster.

Nichts wird übertragen.

Ablauf und Stolpersteine

  1. Versatz und Weichzeichner so lange schieben, bis die Karte vom Hintergrund trennt — nicht bis sie schmutzig wirkt.
  2. Farbe mit Alpha, nicht nur Schwarz. Den Ton vorher in der Palette oder per Pipette holen.
  3. Zeile in die CSS-Datei, nicht als Screenshot des Schattens.

Stolperstein: vier Schatten plus Verlauf plus geringem Textkontrast. BITV prüft Lesen, nicht „Modernität“. px/rem über die CSS-Einheiten, wenn das Design-System rem verlangt.

Häufige Fragen

Bekomme ich einen Verlauf statt eines Schattens?

Verläufe liegen unter CSS-Verlauf. Kontrast von Text: Kontrastprüfer.

px oder rem?

Die Werte sind die, die Sie einstellen. Umrechnen: CSS-Einheiten — 1 rem ist nur 16 px, wenn die Root so steht.

Wird CSS irgendwohin geschickt?

Nein. Sie kopieren die Zeile.

Schatten auf einem Foto?

Das ist Pixel, nicht CSS. Bild-Wasserzeichen oder ein Grafikprogramm.

Palette zuerst?

Farbpaletten-Generator, dann den Ton in den Schatten tragen.

Verwandte Tools