[{"data":1,"prerenderedAt":603},["ShallowReactive",2],{"help-article-\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Feffects-and-transforms":3},{"id":4,"title":5,"body":6,"category":566,"description":567,"extension":568,"keywords":569,"meta":593,"navigation":594,"order":595,"path":596,"published":597,"rawbody":598,"seo":599,"stem":600,"updated":601,"__hash__":602},"helpDe\u002Fhelp\u002Fdesign-elements-and-tools\u002Feffects-and-transforms.de.md","Aussehen, Effekte und Transformationen",{"type":7,"value":8,"toc":556},"minimark",[9,37,56,60,68,164,187,190,242,245,271,284,290,311,318,325,330,343,362,365,368,434,437,525,532],[10,11,12,13,17,18,22,23,26,27,30,31,36],"p",{},"Im ",[14,15,16],"place",{},"Properties-Panel"," legst du mit drei Abschnitten fest, wie ein Element aussieht: ",[19,20,21],"strong",{},"Appearance"," für Kontur, Ecken und Deckkraft, ",[19,24,25],{},"Transforms"," zum Drehen, Skalieren und Neigen, ",[19,28,29],{},"Filters & Effects"," für Schatten, Filter und Links. Wie du Farben und Verläufe einstellst, steht in ",[32,33,35],"a",{"href":34},"\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcolors-and-gradients","Farben und Verläufe einstellen",".",[10,38,39,40,43,44,47,48,50,51,53,54,36],{},"Die Abschnitte siehst du, wenn du ein Element auf dem ",[14,41,42],{},"Canvas"," oder im ",[14,45,46],{},"Layers-Panel"," auswählst. Mit einem Klick auf den Titel klappst du einen Abschnitt auf oder zu. ",[19,49,25],{}," und ",[19,52,29],{}," sind zuerst zugeklappt, bei Gruppen und Masken auch ",[19,55,21],{},[57,58,21],"h2",{"id":59},"appearance",[10,61,62],{},[63,64],"img",{"alt":65,"src":66,"width":67},"Abschnitt Appearance eines Rechtecks mit angehakten Fill Color und Stroke Color: Stroke Width, Stroke Alignment, Dash, Offset, Corner Radius mit dem Button Individual corners, Opacity und Visibility.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-effects-and-transforms-04\u002Fpublic",938,[69,70,71,85,91,97,118,132,138,148,154],"ul",{},[72,73,74,77,78,81,82,84],"li",{},[19,75,76],{},"Fill Color",": füllt das Element mit einer Farbe oder einem Verlauf. Bei Rechtecken, Ellipsen, Pfaden, Texten, Gruppen und Masken. Bilder haben keine Füllung, sie färbst du mit ",[19,79,80],{},"Color Masking"," unter ",[19,83,29],{}," ein.",[72,86,87,90],{},[19,88,89],{},"Stroke Color",": gibt dem Element eine Kontur, in einer Farbe oder einem Verlauf. Bei allen Elementen.",[72,92,93,96],{},[19,94,95],{},"Stroke Width",": die Breite der Kontur. Schaltest du die Kontur ein, ist sie 5 Pixel breit, bei Texten 2.",[72,98,99,102,103,106,107,110,111,114,115,117],{},[19,100,101],{},"Stroke Alignment",": ob die Kontur innen (",[19,104,105],{},"Inside","), mittig (",[19,108,109],{},"Center",") oder außen (",[19,112,113],{},"Outside",") an der Kante liegt. Standardmäßig ",[19,116,109],{},". Für die Kontur der Buchstaben eines Texts gibt es das nicht.",[72,119,120,123,124,127,128,131],{},[19,121,122],{},"Dash",": durchgezogene, gestrichelte oder gepunktete Kontur. Das Menü zeigt die drei Linien als Vorschau. Bei einer gestrichelten oder gepunkteten Linie erscheinen ",[19,125,126],{},"Length"," für die Länge der Striche und ",[19,129,130],{},"Gap"," für die Lücken.",[72,133,134,137],{},[19,135,136],{},"Offset",": verschiebt die Striche entlang der Kontur.",[72,139,140,143,144,147],{},[19,141,142],{},"Corner Radius",": rundet die Ecken ab. Bei Rechtecken, Bildern, Gruppen und Masken. Mit dem Button daneben (",[19,145,146],{},"Individual corners",") stellst du jede Ecke einzeln ein.",[72,149,150,153],{},[19,151,152],{},"Opacity",": die Deckkraft, von 0 (unsichtbar) bis 100 (voll sichtbar).",[72,155,156,159,160,36],{},[19,157,158],{},"Visibility",": blendet das Element mit dem Augen-Symbol aus und ein. Verbindest du die Eigenschaft mit einem Checkbox-Input-Feld, schalten Nutzer das Element selbst ein und aus. Wie das geht, steht in ",[32,161,163],{"href":162},"\u002Fde\u002Fhelp\u002Finput-fields\u002Fshow-or-hide-element","Checkbox-Input-Feld erstellen: Element ein- und ausblenden lassen",[10,165,166,167,50,170,173,174,178,179,50,183,36],{},"Gruppen und Masken haben zusätzlich ",[19,168,169],{},"Background Clip",[19,171,172],{},"Padding"," für ihre Füllung, Texte eigene Eigenschaften für ihren Hintergrund. Sie stehen in ",[32,175,177],{"href":176},"\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fgroup-elements","Elemente gruppieren: zusammen bewegen und anordnen",", ",[32,180,182],{"href":181},"\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fmask-elements","Elemente maskieren: Bild auf eine Form zuschneiden",[32,184,186],{"href":185},"\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Ftext-settings","Text-Eigenschaften",[57,188,25],{"id":189},"transforms",[69,191,192,208,219,230],{},[72,193,194,197,198,50,201,204,205,84],{},[19,195,196],{},"Translate",": verschiebt das Element um zusätzliche Pixel, mit ",[19,199,200],{},"X",[19,202,203],{},"Y",". Die eigentliche Position stellst du unter ",[19,206,207],{},"Position & Size",[72,209,210,213,214,50,216,218],{},[19,211,212],{},"Scale",": streckt oder staucht das Element, mit ",[19,215,200],{},[19,217,203],{},". 1 ist die Originalgröße, 2 die doppelte.",[72,220,221,224,225,81,228,36],{},[19,222,223],{},"Rotate",": dreht das Element um die angegebenen Grad. Bei Rechtecken und Ellipsen steht derselbe Wert auch als ",[19,226,227],{},"Rotation",[19,229,207],{},[72,231,232,235,236,50,239,36],{},[19,233,234],{},"Skew",": neigt das Element, mit ",[19,237,238],{},"X °",[19,240,241],{},"Y °",[10,243,244],{},"Bei Texten kommen am Ende zwei Einstellungen dazu:",[69,246,247,261],{},[72,248,249,252,253,256,257,260],{},[19,250,251],{},"Rotate Text",": ",[19,254,255],{},"Line °"," dreht jede Zeile, ",[19,258,259],{},"Char °"," jeden Buchstaben für sich.",[72,262,263,266,267,50,269,36],{},[19,264,265],{},"Skew Lines",": neigt jede Zeile, mit ",[19,268,238],{},[19,270,241],{},[10,272,273,274,277,278,280,281,283],{},"Drehen, Skalieren und Neigen wirken um den ",[19,275,276],{},"Origin"," des Elements. Bei Gruppen steht er oben in ",[19,279,25],{},", bei Rechtecken, Ellipsen, Pfaden, Texten und Bildern unter ",[19,282,207],{},". Masken haben keinen eigenen Origin.",[10,285,286,287,289],{},"Drehen geht auch direkt auf dem ",[14,288,42],{},": Fährst du knapp außerhalb einer Ecke des ausgewählten Elements, wird der Mauszeiger zu einem Drehpfeil. Ziehst du dann, dreht sich das Element.",[10,291,292,294,295,297,298,302,303,306,307,36],{},[19,293,152],{}," und die Werte unter ",[19,296,25],{}," kannst du mit Keyframes animieren, siehe ",[32,299,301],{"href":300},"\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fvideo-and-animation","Template animieren: ein Video mit bewegten Elementen erstellen",". Spiegeln kannst du nur Bilder, mit ",[19,304,305],{},"Flip"," in den ",[32,308,310],{"href":309},"\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fimage-cover-mode#image","Bild-Eigenschaften",[10,312,313],{},[63,314],{"alt":315,"src":316,"width":317},"Abschnitt Transforms eines Rechtecks: Translate, Scale, Rotate auf 20 und Skew.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-effects-and-transforms-02\u002Fpublic",343,[10,319,320],{},[63,321],{"alt":322,"src":323,"width":324},"Das um 20° gedrehte Rechteck auf dem Canvas.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-effects-and-transforms-03\u002Fpublic",950,[326,327,329],"h3",{"id":328},"gedrehte-elemente-und-das-anchoring-werkzeug","Gedrehte Elemente und das Anchoring-Werkzeug",[10,331,332,333,337,338,340,341,36],{},"Das ",[32,334,336],{"href":335},"\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fanchoring-tool","Anchoring-Werkzeug"," funktioniert auch mit gedrehten Elementen, aber mit Einschränkungen. Das gilt, sobald ein Wert unter ",[19,339,25],{}," vom Standard abweicht, nicht nur bei ",[19,342,223],{},[69,344,345,352,359],{},[72,346,347,348,36],{},"Das Werkzeug nutzt den geraden Rahmen um das gedrehte Element. Beim Ziehen enthält das Label ",[349,350,351],"code",{},".bbox",[72,353,354,355,358],{},"Ein gedrehtes Element verbindest du nur Kante an Kante. ",[19,356,357],{},"Surfaces"," und die Griffe für die Größe gibt es dafür nicht.",[72,360,361],{},"Eine gedrehte Gruppe lässt sich nicht verbinden. Das gilt auch für Elemente in einer gedrehten Gruppe und für gedrehte Elemente in einer Gruppe oder Maske.",[57,363,29],{"id":364},"filters-effects",[10,366,367],{},"Jeder Effekt hat ein Kästchen. Setzt du den Haken, erscheinen seine Einstellungen darunter. Nimmst du ihn heraus, ist der Effekt wieder weg. Welche Effekte du siehst, hängt vom Element ab:",[69,369,370,384,417,425],{},[72,371,372,252,375,178,378,50,381,36],{},[19,373,374],{},"Rechtecke, Ellipsen, Pfade und Texte",[19,376,377],{},"Drop Shadow",[19,379,380],{},"Invert",[19,382,383],{},"Hue Rotate",[72,385,386,389,390,178,393,178,396,178,399,178,402,178,405,178,408,178,411,50,414,36],{},[19,387,388],{},"Bilder, Gruppen und Masken",": zusätzlich ",[19,391,392],{},"Blur",[19,394,395],{},"Grayscale",[19,397,398],{},"Sepia",[19,400,401],{},"Filter Opacity",[19,403,404],{},"Exposure",[19,406,407],{},"Contrast",[19,409,410],{},"Saturate",[19,412,413],{},"Brightness",[19,415,416],{},"Gradient Map",[72,418,419,422,423,36],{},[19,420,421],{},"Bilder",": außerdem ",[19,424,80],{},[72,426,427,252,430,433],{},[19,428,429],{},"Alle Elemente",[19,431,432],{},"Link"," ganz oben im Abschnitt.",[10,435,436],{},"Die Effekte in der Reihenfolge des Abschnitts:",[69,438,439,444,449,459,472,481,486,495,516],{},[72,440,441,443],{},[19,442,432],{},": macht das ganze Element zu einem klickbaren Link, zum Beispiel in einem PDF-Export. Du gibst die Webadresse in das Feld darunter ein.",[72,445,446,448],{},[19,447,80],{}," (Bilder): färbt alle sichtbaren Teile des Bildes in einer Farbe oder einem Verlauf ein, durchsichtige Teile bleiben leer. Gut für Icons und Logos mit durchsichtigem Hintergrund. Ein Foto ohne durchsichtige Stellen wird zu einer einfarbigen Fläche. Startet mit Schwarz.",[72,450,451,453,454,50,456,458],{},[19,452,392],{},": macht das Element unscharf, mit getrennten Werten für ",[19,455,200],{},[19,457,203],{},". Startet bei 0.",[72,460,461,463,464,467,468,471],{},[19,462,377],{},": ein Schatten hinter dem Element. Du stellst Winkel (°), Abstand (↘), Farbe, Deckkraft, Unschärfe (",[19,465,466],{},"blur",") und ",[19,469,470],{},"quality"," ein. Zu Beginn ist es ein scharfer schwarzer Schatten, 10 Pixel unter dem Element.",[72,473,474,178,476,50,478,480],{},[19,475,395],{},[19,477,398],{},[19,479,380],{},": Die Stärke reicht von 0 bis 1. Sie starten bei 0, du siehst also erst eine Änderung, wenn du den Wert erhöhst.",[72,482,483,485],{},[19,484,383],{},": verschiebt alle Farben im Farbkreis, von 0 bis 360°. Startet bei 0.",[72,487,488,490,491,81,493,36],{},[19,489,401],{},": eine zusätzliche Transparenz von 0 bis 1. Startet bei 1. Für die normale Transparenz nimmst du ",[19,492,152],{},[19,494,21],{},[72,496,497,178,499,178,501,50,503,505,506,178,509,50,512,515],{},[19,498,404],{},[19,500,407],{},[19,502,410],{},[19,504,413],{},": je ein Wert für ",[19,507,508],{},"Red",[19,510,511],{},"Green",[19,513,514],{},"Blue",", von 0 bis 1. Sie starten bei 0,5.",[72,517,518,520,521,524],{},[19,519,416],{},": färbt das Element nach Helligkeit ein. Dunkle Stellen bekommen die Farben am Anfang des Verlaufs unter ",[19,522,523],{},"Color Stops",", helle Stellen die am Ende. Zu Beginn geht der Verlauf von Schwarz nach Weiß. Mit dem Plus unter der Liste fügst du eine Farbe hinzu.",[10,526,527],{},[63,528],{"alt":529,"src":530,"width":531},"Abschnitt Filters & Effects mit aktiviertem Drop Shadow und seinen Einstellungen für Winkel, Abstand, Farbe, Deckkraft und Unschärfe.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-effects-and-transforms-01\u002Fpublic",348,[533,534,535],"related",{},[69,536,537,541,546,552],{},[72,538,539],{},[32,540,35],{"href":34},[72,542,543],{},[32,544,310],{"href":545},"\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fimage-cover-mode",[72,547,548],{},[32,549,551],{"href":550},"\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fdesign-elements","Design-Elemente (Bilder, Text, Formen)",[72,553,554],{},[32,555,301],{"href":300},{"title":557,"searchDepth":558,"depth":558,"links":559},"",2,[560,561,565],{"id":59,"depth":558,"text":21},{"id":189,"depth":558,"text":25,"children":562},[563],{"id":328,"depth":564,"text":329},3,{"id":364,"depth":558,"text":29},"design-elements-and-tools","Alle Eigenschaften der Abschnitte Appearance, Transforms und Filters & Effects: Kontur, Ecken, Deckkraft, Drehen, Schatten, Filter und Link.","md",[21,570,571,572,573,122,25,574,575,576,577,29,578,466,579,580,581,582,583,432,584,585,586,587,588,589,590,591,592],"opacity","visibility","stroke","corner radius","translate","scale","rotate","skew","drop shadow","grayscale","sepia","hue rotate","invert","gradient map","Deckkraft","Kontur","Ecken","Schatten","Effekte","Filter","drehen","neigen","skalieren",{},true,27,"\u002Fhelp\u002Fdesign-elements-and-tools\u002Feffects-and-transforms.de","2026-10-13","---\ntitle: \"Aussehen, Effekte und Transformationen\"\ndescription: \"Alle Eigenschaften der Abschnitte Appearance, Transforms und Filters & Effects: Kontur, Ecken, Deckkraft, Drehen, Schatten, Filter und Link.\"\ncategory: design-elements-and-tools\norder: 27\nkeywords: [\"Appearance\", \"opacity\", \"visibility\", \"stroke\", \"corner radius\", \"Dash\", \"Transforms\", \"translate\", \"scale\", \"rotate\", \"skew\", \"Filters & Effects\", \"drop shadow\", \"blur\", \"grayscale\", \"sepia\", \"hue rotate\", \"invert\", \"gradient map\", \"Link\", \"Deckkraft\", \"Kontur\", \"Ecken\", \"Schatten\", \"Effekte\", \"Filter\", \"drehen\", \"neigen\", \"skalieren\"]\n---\nIm :place[Properties-Panel] legst du mit drei Abschnitten fest, wie ein Element aussieht: **Appearance** für Kontur, Ecken und Deckkraft, **Transforms** zum Drehen, Skalieren und Neigen, **Filters & Effects** für Schatten, Filter und Links. Wie du Farben und Verläufe einstellst, steht in [Farben und Verläufe einstellen](\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcolors-and-gradients).\n\nDie Abschnitte siehst du, wenn du ein Element auf dem :place[Canvas] oder im :place[Layers-Panel] auswählst. Mit einem Klick auf den Titel klappst du einen Abschnitt auf oder zu. **Transforms** und **Filters & Effects** sind zuerst zugeklappt, bei Gruppen und Masken auch **Appearance**.\n\n## Appearance\n\n![Abschnitt Appearance eines Rechtecks mit angehakten Fill Color und Stroke Color: Stroke Width, Stroke Alignment, Dash, Offset, Corner Radius mit dem Button Individual corners, Opacity und Visibility.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-effects-and-transforms-04\u002Fpublic){width=\"938\"}\n\n- **Fill Color**: füllt das Element mit einer Farbe oder einem Verlauf. Bei Rechtecken, Ellipsen, Pfaden, Texten, Gruppen und Masken. Bilder haben keine Füllung, sie färbst du mit **Color Masking** unter **Filters & Effects** ein.\n- **Stroke Color**: gibt dem Element eine Kontur, in einer Farbe oder einem Verlauf. Bei allen Elementen.\n- **Stroke Width**: die Breite der Kontur. Schaltest du die Kontur ein, ist sie 5 Pixel breit, bei Texten 2.\n- **Stroke Alignment**: ob die Kontur innen (**Inside**), mittig (**Center**) oder außen (**Outside**) an der Kante liegt. Standardmäßig **Center**. Für die Kontur der Buchstaben eines Texts gibt es das nicht.\n- **Dash**: durchgezogene, gestrichelte oder gepunktete Kontur. Das Menü zeigt die drei Linien als Vorschau. Bei einer gestrichelten oder gepunkteten Linie erscheinen **Length** für die Länge der Striche und **Gap** für die Lücken.\n- **Offset**: verschiebt die Striche entlang der Kontur.\n- **Corner Radius**: rundet die Ecken ab. Bei Rechtecken, Bildern, Gruppen und Masken. Mit dem Button daneben (**Individual corners**) stellst du jede Ecke einzeln ein.\n- **Opacity**: die Deckkraft, von 0 (unsichtbar) bis 100 (voll sichtbar).\n- **Visibility**: blendet das Element mit dem Augen-Symbol aus und ein. Verbindest du die Eigenschaft mit einem Checkbox-Input-Feld, schalten Nutzer das Element selbst ein und aus. Wie das geht, steht in [Checkbox-Input-Feld erstellen: Element ein- und ausblenden lassen](\u002Fde\u002Fhelp\u002Finput-fields\u002Fshow-or-hide-element).\n\nGruppen und Masken haben zusätzlich **Background Clip** und **Padding** für ihre Füllung, Texte eigene Eigenschaften für ihren Hintergrund. Sie stehen in [Elemente gruppieren: zusammen bewegen und anordnen](\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fgroup-elements), [Elemente maskieren: Bild auf eine Form zuschneiden](\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fmask-elements) und [Text-Eigenschaften](\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Ftext-settings).\n\n## Transforms\n\n- **Translate**: verschiebt das Element um zusätzliche Pixel, mit **X** und **Y**. Die eigentliche Position stellst du unter **Position & Size** ein.\n- **Scale**: streckt oder staucht das Element, mit **X** und **Y**. 1 ist die Originalgröße, 2 die doppelte.\n- **Rotate**: dreht das Element um die angegebenen Grad. Bei Rechtecken und Ellipsen steht derselbe Wert auch als **Rotation** unter **Position & Size**.\n- **Skew**: neigt das Element, mit **X °** und **Y °**.\n\nBei Texten kommen am Ende zwei Einstellungen dazu:\n\n- **Rotate Text**: **Line °** dreht jede Zeile, **Char °** jeden Buchstaben für sich.\n- **Skew Lines**: neigt jede Zeile, mit **X °** und **Y °**.\n\nDrehen, Skalieren und Neigen wirken um den **Origin** des Elements. Bei Gruppen steht er oben in **Transforms**, bei Rechtecken, Ellipsen, Pfaden, Texten und Bildern unter **Position & Size**. Masken haben keinen eigenen Origin.\n\nDrehen geht auch direkt auf dem :place[Canvas]: Fährst du knapp außerhalb einer Ecke des ausgewählten Elements, wird der Mauszeiger zu einem Drehpfeil. Ziehst du dann, dreht sich das Element.\n\n**Opacity** und die Werte unter **Transforms** kannst du mit Keyframes animieren, siehe [Template animieren: ein Video mit bewegten Elementen erstellen](\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fvideo-and-animation). Spiegeln kannst du nur Bilder, mit **Flip** in den [Bild-Eigenschaften](\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fimage-cover-mode#image).\n\n![Abschnitt Transforms eines Rechtecks: Translate, Scale, Rotate auf 20 und Skew.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-effects-and-transforms-02\u002Fpublic){width=\"343\"}\n\n![Das um 20° gedrehte Rechteck auf dem Canvas.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-effects-and-transforms-03\u002Fpublic){width=\"950\"}\n\n### Gedrehte Elemente und das Anchoring-Werkzeug\n\nDas [Anchoring-Werkzeug](\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fanchoring-tool) funktioniert auch mit gedrehten Elementen, aber mit Einschränkungen. Das gilt, sobald ein Wert unter **Transforms** vom Standard abweicht, nicht nur bei **Rotate**.\n\n- Das Werkzeug nutzt den geraden Rahmen um das gedrehte Element. Beim Ziehen enthält das Label `.bbox`.\n- Ein gedrehtes Element verbindest du nur Kante an Kante. **Surfaces** und die Griffe für die Größe gibt es dafür nicht.\n- Eine gedrehte Gruppe lässt sich nicht verbinden. Das gilt auch für Elemente in einer gedrehten Gruppe und für gedrehte Elemente in einer Gruppe oder Maske.\n\n## Filters & Effects\n\nJeder Effekt hat ein Kästchen. Setzt du den Haken, erscheinen seine Einstellungen darunter. Nimmst du ihn heraus, ist der Effekt wieder weg. Welche Effekte du siehst, hängt vom Element ab:\n\n- **Rechtecke, Ellipsen, Pfade und Texte**: **Drop Shadow**, **Invert** und **Hue Rotate**.\n- **Bilder, Gruppen und Masken**: zusätzlich **Blur**, **Grayscale**, **Sepia**, **Filter Opacity**, **Exposure**, **Contrast**, **Saturate**, **Brightness** und **Gradient Map**.\n- **Bilder**: außerdem **Color Masking**.\n- **Alle Elemente**: **Link** ganz oben im Abschnitt.\n\nDie Effekte in der Reihenfolge des Abschnitts:\n\n- **Link**: macht das ganze Element zu einem klickbaren Link, zum Beispiel in einem PDF-Export. Du gibst die Webadresse in das Feld darunter ein.\n- **Color Masking** (Bilder): färbt alle sichtbaren Teile des Bildes in einer Farbe oder einem Verlauf ein, durchsichtige Teile bleiben leer. Gut für Icons und Logos mit durchsichtigem Hintergrund. Ein Foto ohne durchsichtige Stellen wird zu einer einfarbigen Fläche. Startet mit Schwarz.\n- **Blur**: macht das Element unscharf, mit getrennten Werten für **X** und **Y**. Startet bei 0.\n- **Drop Shadow**: ein Schatten hinter dem Element. Du stellst Winkel (°), Abstand (↘), Farbe, Deckkraft, Unschärfe (**blur**) und **quality** ein. Zu Beginn ist es ein scharfer schwarzer Schatten, 10 Pixel unter dem Element.\n- **Grayscale**, **Sepia** und **Invert**: Die Stärke reicht von 0 bis 1. Sie starten bei 0, du siehst also erst eine Änderung, wenn du den Wert erhöhst.\n- **Hue Rotate**: verschiebt alle Farben im Farbkreis, von 0 bis 360°. Startet bei 0.\n- **Filter Opacity**: eine zusätzliche Transparenz von 0 bis 1. Startet bei 1. Für die normale Transparenz nimmst du **Opacity** unter **Appearance**.\n- **Exposure**, **Contrast**, **Saturate** und **Brightness**: je ein Wert für **Red**, **Green** und **Blue**, von 0 bis 1. Sie starten bei 0,5.\n- **Gradient Map**: färbt das Element nach Helligkeit ein. Dunkle Stellen bekommen die Farben am Anfang des Verlaufs unter **Color Stops**, helle Stellen die am Ende. Zu Beginn geht der Verlauf von Schwarz nach Weiß. Mit dem Plus unter der Liste fügst du eine Farbe hinzu.\n\n![Abschnitt Filters & Effects mit aktiviertem Drop Shadow und seinen Einstellungen für Winkel, Abstand, Farbe, Deckkraft und Unschärfe.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-effects-and-transforms-01\u002Fpublic){width=\"348\"}\n\n::related\n- [Farben und Verläufe einstellen](\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcolors-and-gradients)\n- [Bild-Eigenschaften](\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fimage-cover-mode)\n- [Design-Elemente (Bilder, Text, Formen)](\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fdesign-elements)\n- [Template animieren: ein Video mit bewegten Elementen erstellen](\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fvideo-and-animation)\n::\n",{"title":5,"description":567},"help\u002Fdesign-elements-and-tools\u002Feffects-and-transforms.de","2026-10-22","rXUdOBtyqPaKKDi2OZHgi8GSCRlGVTz5WkZKoa2YZHg",1792680563795]