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 { generatePresentation } from "@office-open/pptx";
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "10.6cm",
"height": "6.6cm",
"fill": { "type": "solid", "color": "2E74B5" }
}
}
]
}
]
}
generatePresentation({
slides: [
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "10.6cm",
height: "6.6cm",
fill: { type: "solid", color: "2E74B5" },
},
},
],
},
],
});
Short form — pass a color string directly:
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "10.6cm",
"height": "6.6cm",
"fill": "2E74B5"
}
}
]
}
]
}
generatePresentation({
slides: [
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "10.6cm",
height: "6.6cm",
fill: "2E74B5",
},
},
],
},
],
});
Gradient Fill
Linear Gradient (with angle)
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "15.9cm",
"height": "6.6cm",
"fill": {
"type": "gradient",
"stops": [
{ "position": 0, "color": "0D47A1" },
{ "position": 100, "color": "42A5F5" }
],
"angle": 45
}
}
}
]
}
]
}
generatePresentation({
slides: [
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "15.9cm",
height: "6.6cm",
fill: {
type: "gradient",
stops: [
{ position: 0, color: "0D47A1" },
{ position: 100, color: "42A5F5" },
],
angle: 45,
},
},
},
],
},
],
});
Radial Gradient (with path)
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "10.6cm",
"height": "10.6cm",
"geometry": "ellipse",
"fill": {
"type": "gradient",
"stops": [
{ "position": 0, "color": "FFFFFF" },
{ "position": 100, "color": "1565C0" }
],
"path": "circle"
}
}
}
]
}
]
}
generatePresentation({
slides: [
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "10.6cm",
height: "10.6cm",
geometry: "ellipse",
fill: {
type: "gradient",
stops: [
{ position: 0, color: "FFFFFF" },
{ position: 100, color: "1565C0" },
],
path: "circle",
},
},
},
],
},
],
});
Multi-stop Gradient
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "15.9cm",
"height": "6.6cm",
"fill": {
"type": "gradient",
"stops": [
{ "position": 0, "color": "E53935" },
{ "position": 50, "color": "FF9800" },
{ "position": 100, "color": "FFEB3B" }
],
"angle": 90
}
}
}
]
}
]
}
generatePresentation({
slides: [
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "15.9cm",
height: "6.6cm",
fill: {
type: "gradient",
stops: [
{ position: 0, color: "E53935" },
{ position: 50, color: "FF9800" },
{ position: 100, color: "FFEB3B" },
],
angle: 90,
},
},
},
],
},
],
});
Image Fill (Blip Fill)
The data field accepts raw bytes (Uint8Array, ArrayBuffer, Buffer) or a base64 data URL such as data:image/png;base64,....
import * as fs from "node:fs";
import { generatePresentation } from "@office-open/pptx";
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "15.9cm",
"height": "9.3cm",
"fill": {
"type": "blip",
"data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",
"imageType": "png"
}
}
}
]
}
]
}
generatePresentation({
slides: [
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "15.9cm",
height: "9.3cm",
fill: {
type: "blip",
data: new Uint8Array(fs.readFileSync("texture.png")),
imageType: "png",
},
},
},
],
},
],
});
No Fill (Transparent)
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "13.2cm",
"height": "6.6cm",
"fill": { "type": "none" },
"outline": { "color": "2E74B5", "width": 2 }
}
}
]
}
]
}
generatePresentation({
slides: [
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "13.2cm",
height: "6.6cm",
fill: { type: "none" },
outline: { color: "2E74B5", width: 12700 },
},
},
],
},
],
});
Outline
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "13.2cm",
"height": "6.6cm",
"fill": { "type": "solid", "color": "E3F2FD" },
"outline": {
"color": "1565C0",
"width": "0.1cm",
"dash": "solid"
}
}
}
]
}
]
}
generatePresentation({
slides: [
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "13.2cm",
height: "6.6cm",
fill: { type: "solid", color: "E3F2FD" },
outline: {
color: "1565C0",
width: "1pt", // number = EMU, or UniversalMeasure string ("1pt", "0.1cm"); 12700 = 1pt
dash: "solid", // "solid" | "dash" | "dashDot" | "lgDash" | "sysDot" | "sysDash"
},
},
},
],
},
],
});
Effects
Use the effects property for shadows, glow, reflection, soft edge, and 3D effects:
Outer Shadow
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "5.3cm",
"height": "3.2cm",
"fill": "ED7D31",
"effects": {
"outerShadow": {
"blurRadius": 50800,
"distance": 38100,
"direction": 90,
"color": { "value": "000000", "transforms": { "alpha": 50 } }
}
}
}
}
]
}
]
}
generatePresentation({
slides: [
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "5.3cm",
height: "3.2cm",
fill: "ED7D31",
effects: {
outerShadow: {
blurRadius: 50800, // Blur radius (EMU or UniversalMeasure)
distance: 38100, // Offset distance (EMU or UniversalMeasure)
direction: 90, // Angle in degrees
color: { value: "000000", transforms: { alpha: 50 } }, // alpha = opacity percent
},
},
},
},
],
},
],
});
Inner Shadow
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "5.3cm",
"height": "3.2cm",
"fill": "5B9BD5",
"effects": {
"innerShadow": {
"blurRadius": 40000,
"distance": 30000,
"direction": 90,
"color": { "value": "000000", "transforms": { "alpha": 40 } }
}
}
}
}
]
}
]
}
generatePresentation({
slides: [
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "5.3cm",
height: "3.2cm",
fill: "5B9BD5",
effects: {
innerShadow: {
blurRadius: 40000,
distance: 30000,
direction: 90, // Angle in degrees
color: { value: "000000", transforms: { alpha: 40 } }, // alpha = opacity percent
},
},
},
},
],
},
],
});
Glow
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "5.3cm",
"height": "3.2cm",
"fill": "70AD47",
"effects": {
"glow": {
"radius": 152400,
"color": { "value": "92D050", "transforms": { "alpha": 60 } }
}
}
}
}
]
}
]
}
generatePresentation({
slides: [
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "5.3cm",
height: "3.2cm",
fill: "70AD47",
effects: {
glow: {
radius: 152400, // Glow radius (EMU or UniversalMeasure)
color: { value: "92D050", transforms: { alpha: 60 } }, // alpha = opacity percent
},
},
},
},
],
},
],
});
Reflection
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "5.3cm",
"height": "3.2cm",
"fill": "FFC000",
"effects": {
"reflection": {
"blurRadius": 6350,
"distance": 38100,
"direction": 90,
"startAlpha": 90,
"endAlpha": 0
}
}
}
}
]
}
]
}
generatePresentation({
slides: [
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "5.3cm",
height: "3.2cm",
fill: "FFC000",
effects: {
reflection: {
blurRadius: 6350,
distance: 38100,
direction: 90, // Angle in degrees
startAlpha: 90, // Start opacity percentage
endAlpha: 0, // End opacity percentage
},
},
},
},
],
},
],
});
Soft Edge
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "5.3cm",
"height": "3.2cm",
"fill": "BF8F00",
"effects": {
"softEdge": 50800
}
}
}
]
}
]
}
generatePresentation({
slides: [
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "5.3cm",
height: "3.2cm",
fill: "BF8F00",
effects: {
softEdge: 50800, // Soft edge radius (EMU or UniversalMeasure) — scalar, not an object
},
},
},
],
},
],
});
3D Rotation and Bevel
3D is split across two shape properties — not under effects:
scene3d(a:scene3d) — the 3D scene:cameraandlightRig(and optionalbackdrop). Camera rotation is a sphere coordinate{ lat, lon, rev }in degrees;lightRigcarries arigand adirection.shape3d(a:sp3d) — the 3D shape body:bevelT/bevelB(top/bottom bevels),extrusionH,contourW,z, andprstMaterial.
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "5.3cm",
"height": "4.0cm",
"fill": "FFC000",
"scene3d": {
"camera": {
"preset": "perspectiveFront",
"fov": 30,
"rotation": { "lat": 0, "lon": 0, "rev": 10 }
},
"lightRig": { "rig": "threePt", "direction": "t" }
},
"shape3d": {
"bevelT": { "w": 76200, "h": 76200, "prst": "circle" },
"extrusionH": 50000,
"prstMaterial": "plastic"
}
}
}
]
}
]
}
generatePresentation({
slides: [
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "5.3cm",
height: "4.0cm",
fill: "FFC000",
scene3d: {
camera: {
preset: "perspectiveFront",
fov: 30, // field of view in degrees
rotation: { lat: 0, lon: 0, rev: 10 }, // sphere coords, degrees
},
lightRig: { rig: "threePt", direction: "t" },
},
shape3d: {
bevelT: { w: 76200, h: 76200, prst: "circle" }, // EMU
extrusionH: 50000, // Extrusion height (EMU)
prstMaterial: "plastic", // "plastic" | "metal" | "matte" | "flat" | …
},
},
},
],
},
],
});
Combined Effects
Multiple effects can be applied simultaneously:
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "5.3cm",
"height": "3.2cm",
"fill": "7030A0",
"effects": {
"outerShadow": {
"blurRadius": 40000,
"distance": 30000,
"direction": 45,
"color": { "value": "000000", "transforms": { "alpha": 40 } }
},
"glow": {
"radius": 101600,
"color": { "value": "B381E7", "transforms": { "alpha": 35 } }
}
}
}
}
]
}
]
}
generatePresentation({
slides: [
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "5.3cm",
height: "3.2cm",
fill: "7030A0",
effects: {
outerShadow: {
blurRadius: 40000,
distance: 30000,
direction: 45, // Angle in degrees
color: { value: "000000", transforms: { alpha: 40 } },
},
glow: { radius: 101600, color: { value: "B381E7", transforms: { alpha: 35 } } },
},
},
},
],
},
],
});
Effects Options
effects carries flat 2D effects only (EffectListOptions). 3D lives on the
shape directly via scene3d and shape3d.
| Property | Type | Description |
|---|---|---|
effects.blur | BlurEffectOptions | Blur effect |
effects.glow | GlowEffectOptions | Glow effect (radius + color) |
effects.innerShadow | InnerShadowEffectOptions | Inner shadow (blurRadius, distance, direction in degrees, color) |
effects.outerShadow | OuterShadowEffectOptions | Outer drop shadow (blurRadius, distance, direction in degrees, color) |
effects.reflection | ReflectionEffectOptions | true | Reflection (blurRadius, distance, direction in degrees, startAlpha, endAlpha) |
effects.softEdge | number | UniversalMeasure | Soft edge radius — scalar (EMU or UniversalMeasure) |
scene3d | Scene3DOptions | 3D scene — camera and lightRig (angles in degrees) |
shape3d | Shape3DOptions | 3D shape body — bevelT/bevelB, extrusionH, contourW, z, prstMaterial |
Shadow and glow color is a SolidFillOptions ({ value, transforms }); pass
opacity through color.transforms.alpha (integer percent), not a top-level
alpha.