Kategorien

← View All Tools

Bild-Gradienten-Überlagerung

Fügen Sie Bildern Gradienten-Überlagerungseffekte mit anpassbaren Farben, Richtungen und Mischmodi hinzu

Click to upload file or drag and drop file here

Maximum file size: 10MB Supported formats: image/jpeg, image/png, image/webp, image/gif, image/bmp, image/tiff

Bild für Gradientenüberlagerung

Art des anzuwendenden Gradienten

Startfarbe des Gradienten

Endfarbe des Gradienten

Richtung des linearen Gradienten (0-360 Grad)

0 0.5 1

Deckkraft der Gradientenüberlagerung (0.0 bis 1.0)

Wie der Gradient mit dem Bild gemischt wird

Ausgabeformat für das Ergebnisbild

Ausgabequalität für verlustbehaftete Formate

Wichtige Fakten

Kategorie
Design
Eingabetypen
file, select, color, number, range
Ausgabetyp
file
Sample-Abdeckung
4
API verfügbar
Yes

Überblick

Dieses Tool fügt Bildern Gradienten-Überlagerungseffekte hinzu, mit anpassbaren Farben, Richtungen und Mischmodi. Ideal für visuelle Aufwertungen in Design- und Fotoprojekten.

Wann verwenden

  • •Wenn Sie einem Bild einen künstlerischen Farbverlauf für Stimmung oder Hervorhebung hinzufügen möchten.
  • •Um Fotos oder Grafiken mit sanften Farbüberlagerungen für Social Media oder Webdesign zu optimieren.
  • •Für kreative Experimente mit Gradiententypen und Mischmodi, um einzigartige visuelle Effekte zu erzielen.

So funktioniert es

  • •Laden Sie ein Bild im Format JPEG, PNG, WebP, GIF, BMP oder TIFF hoch (max. 10 MB).
  • •Wählen Sie den Gradiententyp (linear, radial oder diamant) und passen Sie Start- und Endfarbe an.
  • •Legen Sie die Richtung in Grad, die Deckkraft (0.0 bis 1.0) und den Mischmodus (z.B. Multiplizieren oder Aufhellen) fest.
  • •Exportieren Sie das bearbeitete Bild im gewünschten Format (PNG, JPEG, WebP oder AVIF) mit angepasster Qualität.

Anwendungsfälle

Erstellung von ansprechenden Social-Media-Grafiken mit farbigen Gradienten-Overlays für Posts oder Stories.
Anpassung von Produktfotos für Online-Shops, um durch subtile Farbüberlagerungen die Präsentation zu verbessern.
Design von Website-Elementen wie Header-Bildern oder Hintergründen mit maßgeschneiderten Gradienten für ein einheitliches Erscheinungsbild.

Beispiele

1. Warme Porträt-Überlagerung

Fotograf
Hintergrund
Ein Fotograf bearbeitet ein Porträtfoto, das in kühlen Tönen aufgenommen wurde und wärmer wirken soll.
Problem
Das Bild erscheint zu steril und benötigt eine atmosphärische Aufwertung durch Farbverlauf.
Verwendung
Laden Sie das Porträtfoto hoch, wählen Sie einen linearen Gradient von Orange zu Transparent, setzen Sie die Richtung auf 90 Grad und die Deckkraft auf 0.3.
Beispielkonfiguration
{"gradientType": "linear", "startColor": "#FFA500", "endColor": "#FFFFFF00", "direction": 90, "opacity": 0.3, "blendMode": "overlay"}
Ergebnis
Das Bild erhält einen warmen, stimmungsvollen Farbverlauf, der die gewünschte Atmosphäre verstärkt und professionell wirkt.

2. Webdesign-Hintergrund optimieren

Hintergrund
Ein Webdesigner erstellt einen Hintergrund für eine Unternehmenswebsite, der subtil und modern sein soll.
Problem
Der aktuelle einfarbige Hintergrund wirkt langweilig und soll durch einen Gradienten aufgewertet werden.
Verwendung
Wählen Sie ein Hintergrundbild aus, definieren Sie einen radialen Gradient von Blau zu Weiß, passen Sie die Deckkraft auf 0.5 an und exportieren Sie als PNG.
Beispielkonfiguration
{"gradientType": "radial", "startColor": "#0000FF", "endColor": "#FFFFFF", "opacity": 0.5, "blendMode": "over"}
Ergebnis
Der Hintergrund erhält einen sanften blauen Farbverlauf, der die Lesbarkeit von Text verbessert und visuell ansprechend ist.

Mit Samples testen

image, png, jpg
Web Python Bildverarbeitung Beispiele
Web Python Bildverarbeitungsbeispiele mit PIL/Pillow einschließlich Lesen, Speichern, Skalieren und Formatkonvertierung
title token image
image
Web TypeScript Bildverarbeitungsbeispiele
Web TypeScript Bildverarbeitungsbeispiele einschließlich Bild-Lesen/Speichern, Skalierung und Formatkonvertierung
title token image
image
Windows C++ Bildverarbeitung Beispiele
Windows C++ Bildverarbeitungsbeispiele einschließlich Bild-Laden/Speichern, Größenänderung und Formatkonvertierung mit Windows Imaging Component
title token image
image
Web Rust Bildverarbeitungsbeispiele
Web Rust Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung
title token image
image

Verwandte Hubs

Image-Convert-Tools
Entdecken Sie 100 image-Tools für convert-Workflows und vergleichen Sie ähnliche Utilities schnell.
Image-Tools
Entdecken Sie 40 image-Tools für utility-Workflows und vergleichen Sie ähnliche Utilities schnell.
Json-Convert-Tools
Entdecken Sie 100 json-Tools für convert-Workflows und vergleichen Sie ähnliche Utilities schnell.
Audio-Convert-Tools
Entdecken Sie 100 audio-Tools für convert-Workflows und vergleichen Sie ähnliche Utilities schnell.

FAQ

Welche Bildformate unterstützt das Tool?

JPEG, PNG, WebP, GIF, BMP und TIFF werden unterstützt, mit einer Dateigröße bis zu 10 MB.

Kann ich die Transparenz des Gradienten steuern?

Ja, über die Deckkraft-Einstellung von 0.0 (vollständig transparent) bis 1.0 (vollständig deckend).

Was sind Mischmodi und wie wirken sie sich aus?

Mischmodi bestimmen, wie der Gradient mit dem Originalbild kombiniert wird, z.B. 'Multiplizieren' für Verdunklung oder 'Aufhellen' für Aufhellung.

Ist die Nutzung des Tools kostenlos?

Ja, das Tool ist kostenlos und erfordert keine Registrierung oder Installation.

In welchen Formaten kann ich das Ergebnis speichern?

Sie können zwischen PNG (empfohlen), JPEG, WebP und AVIF wählen, mit anpassbarer Qualität für verlustbehaftete Formate.

API-Dokumentation

Request-Endpunkt

POST /de/api/tools/image-add-gradient

Request-Parameter

Parameter-Name Typ Erforderlich Beschreibung
imageFile file (Upload erforderlich) Ja Bild für Gradientenüberlagerung
gradientType select Nein Art des anzuwendenden Gradienten
startColor color Nein Startfarbe des Gradienten
endColor color Nein Endfarbe des Gradienten
direction number Nein Richtung des linearen Gradienten (0-360 Grad)
opacity range Nein Deckkraft der Gradientenüberlagerung (0.0 bis 1.0)
blendMode select Nein Wie der Gradient mit dem Bild gemischt wird
outputFormat select Nein Ausgabeformat für das Ergebnisbild
quality number Nein Ausgabequalität für verlustbehaftete Formate

Dateitypparameter müssen erst über POST /upload/image-add-gradient hochgeladen werden, um filePath zu erhalten, dann filePath an das entsprechende Dateifeld übergeben.

Antwortformat

{
  "filePath": "/public/processing/randomid.ext",
  "fileName": "output.ext",
  "contentType": "application/octet-stream",
  "size": 1024,
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}
Datei: Datei

MCP-Dokumentation

Fügen Sie dieses Tool zu Ihrer MCP-Server-Konfiguration hinzu: 

{
  "mcpServers": {
    "elysiatools-image-add-gradient": {
      "name": "image-add-gradient",
      "description": "Fügen Sie Bildern Gradienten-Überlagerungseffekte mit anpassbaren Farben, Richtungen und Mischmodi hinzu",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=image-add-gradient",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Sie können mehrere Tools verketten, z.B.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, maximal 20 Tools.

Unterstützt URL-Dateilinks oder Base64-Codierung für Dateiparameter.

Wenn Sie auf Probleme stoßen, kontaktieren Sie uns bitte bei [email protected]