PPTX
Effects and Fills
Apply shadows, glow, 3D effects, and various fill types to shapes
Enhance shapes with visual effects (shadows, glow, 3D) and fills (solid, gradient, image, transparent).
Solid Fill
import { Shape } from "@office-open/pptx";
new Shape({
x: 1,
y: 1,
width: 4,
height: 3,
fill: { type: "solid", color: "2E74B5" },
});
Short form — pass a color string directly:
new Shape({
x: 1,
y: 1,
width: 4,
height: 3,
fill: "2E74B5",
});
Gradient Fill
Linear Gradient (with angle)
new Shape({
x: 1,
y: 1,
width: 6,
height: 3,
fill: {
type: "gradient",
stops: [
{ position: 0, color: "0D47A1" },
{ position: 100, color: "42A5F5" },
],
angle: 45,
},
});
Radial Gradient (with path)
new Shape({
x: 1,
y: 1,
width: 5,
height: 5,
geometry: "ellipse",
fill: {
type: "gradient",
stops: [
{ position: 0, color: "FFFFFF" },
{ position: 100, color: "1565C0" },
],
path: "circle",
},
});
Multi-stop Gradient
new Shape({
x: 1,
y: 1,
width: 6,
height: 3,
fill: {
type: "gradient",
stops: [
{ position: 0, color: "E53935" },
{ position: 50, color: "FF9800" },
{ position: 100, color: "FFEB3B" },
],
angle: 90,
},
});
Image Fill (Blip Fill)
import fs from "node:fs";
new Shape({
x: 1,
y: 1,
width: 6,
height: 4,
fill: {
type: "blip",
data: fs.readFileSync("texture.png"),
imageType: "png",
},
});
No Fill (Transparent)
new Shape({
x: 1,
y: 1,
width: 5,
height: 3,
fill: { type: "noFill" },
outline: { color: "2E74B5", width: 2 },
});
Outline
new Shape({
x: 1,
y: 1,
width: 5,
height: 3,
fill: { type: "solid", color: "E3F2FD" },
outline: {
color: "1565C0",
width: 2, // Width in points
dashStyle: "solid", // "solid" | "dash" | "dashDot" | "dot" | "lgDash"
},
});
Shadow
new Shape({
x: 1,
y: 1,
width: 5,
height: 3,
fill: { type: "solid", color: "2E74B5" },
shadow: {
type: "outer",
blur: 6, // Blur radius in points
distance: 3, // Offset distance in points
direction: 2700000, // Angle in 60000ths of a degree (45° = 2700000)
color: "000000",
opacity: 40, // Opacity percentage (0-100)
},
});
Glow
new Shape({
x: 1,
y: 1,
width: 5,
height: 3,
fill: { type: "solid", color: "2E74B5" },
effects: {
glow: {
color: "42A5F5",
radius: 10, // Glow radius in points
opacity: 60,
},
},
});
3D Effects
new Shape({
x: 1,
y: 1,
width: 5,
height: 3,
fill: { type: "solid", color: "2E74B5" },
effects: {
threeD: {
rotation: 30,
depth: 20,
color: "1A237E",
},
},
});
Combining Effects
new Shape({
x: 1,
y: 1,
width: 6,
height: 3,
fill: {
type: "gradient",
stops: [
{ position: 0, color: "1565C0" },
{ position: 100, color: "42A5F5" },
],
angle: 135,
},
outline: { color: "0D47A1", width: 1 },
shadow: {
type: "outer",
blur: 8,
distance: 4,
direction: 2700000,
color: "000000",
opacity: 30,
},
text: "Styled Shape",
});
Advanced Effects API
Use the effects property for fine-grained control over shadows, glow, reflection, and 3D effects:
Outer Shadow
new Shape({
x: 1,
y: 1,
width: 200,
height: 120,
fill: "ED7D31",
effects: {
outerShadow: {
blur: 50800, // Blur radius (EMU)
distance: 38100, // Offset distance (EMU)
direction: 5400000, // Angle (60000ths of a degree)
color: "000000",
alpha: 50, // Opacity percentage
},
},
});
Inner Shadow
new Shape({
x: 1,
y: 1,
width: 200,
height: 120,
fill: "5B9BD5",
effects: {
innerShadow: {
blur: 40000,
distance: 30000,
direction: 5400000,
color: "000000",
alpha: 40,
},
},
});
Glow
new Shape({
x: 1,
y: 1,
width: 200,
height: 120,
fill: "70AD47",
effects: {
glow: {
radius: 152400, // Glow radius (EMU)
color: "92D050",
alpha: 60,
},
},
});
Reflection
new Shape({
x: 1,
y: 1,
width: 200,
height: 120,
fill: "FFC000",
effects: {
reflection: {
blurRadius: 6350,
distance: 38100,
direction: 5400000,
startAlpha: 90, // Start opacity percentage
endAlpha: 0, // End opacity percentage
},
},
});
Soft Edge
new Shape({
x: 1,
y: 1,
width: 200,
height: 120,
fill: "BF8F00",
effects: {
softEdge: { radius: 50800 },
},
});
3D Rotation
new Shape({
x: 1,
y: 1,
width: 200,
height: 200,
fill: "4472C4",
effects: {
rotation3D: {
x: 20, // X rotation (degrees)
y: 30, // Y rotation (degrees)
z: 10, // Z rotation (degrees)
perspective: 500, // Perspective value
},
},
});
Extrusion and Bevel
new Shape({
x: 1,
y: 1,
width: 200,
height: 150,
fill: "FFC000",
effects: {
rotation3D: { x: 25, y: 15 },
extrusionH: 50000, // Extrusion height (EMU)
material: "plastic", // "plastic" | "metal" | "matte" | "flat"
bevelTop: { width: 8, height: 8 },
},
});
Combined Effects
Multiple effects can be applied simultaneously:
new Shape({
x: 1,
y: 1,
width: 200,
height: 120,
fill: "7030A0",
effects: {
outerShadow: {
blur: 40000,
distance: 30000,
direction: 2700000,
color: "000000",
alpha: 40,
},
glow: { radius: 101600, color: "B381E7", alpha: 35 },
},
});