Rich Text
The rich-text asset provides advanced text rendering capabilities with support for animations, gradients, shadows, strokes, and custom styling. It's ideal for creating professional titles, animated text effects, and stylized typography.
The rich-text asset replaces the legacy text asset, which is being deprecated. If you're currently using the text asset, we recommend migrating to rich-text for enhanced features.
Common rich-text patterns
Before diving into individual properties, here are solutions to common text needs:
Animated title
Create an eye-catching title with a word-by-word ascend animation, a custom font and a linear gradient:
{
"timeline": {
"fonts": [
{
"src": "https://shotstack-assets.s3.amazonaws.com/fonts/Oswald-VariableFont.ttf"
}
],
"tracks": [
{
"clips": [
{
"asset": {
"type": "rich-text",
"text": "Evening Night",
"width": 1000,
"height": 300,
"font": {
"family": "Oswald-VariableFont",
"size": 125,
"weight": 900
},
"style": {
"letterSpacing": 8,
"gradient": {
"type": "linear",
"stops": [
{
"offset": 0,
"color": "#005AA7"
},
{
"offset": 1,
"color": "#FFFDE4"
}
]
}
},
"animation": {
"preset": "ascend",
"speed": 1,
"duration": 5
}
},
"start": 0,
"length": 5
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1280,
"height": 720
}
}
}
Bold call-to-action text
Create impactful text with stroke outline and shadow for maximum visibility:
{
"timeline": {
"background": "#000000",
"fonts": [
{
"src": "https://shotstack-assets.s3.amazonaws.com/fonts/SpecialElite-Regular.ttf"
}
],
"tracks": [
{
"clips": [
{
"asset": {
"type": "rich-text",
"text": "SUBSCRIBE NOW",
"width": 800,
"height": 200,
"font": {
"family": "Montserrat",
"size": 64,
"weight": 800,
"color": "#ffd700"
},
"style": {
"letterSpacing": 4,
"textTransform": "uppercase"
},
"stroke": {
"width": 4,
"color": "#000000",
"opacity": 1
},
"shadow": {
"offsetX": 6,
"offsetY": 6,
"blur": 12,
"color": "#000000",
"opacity": 0.7
},
"background": {
"color": "#FF5962",
"borderRadius": 25
},
"animation": {
"preset": "shift",
"speed": 1,
"duration": 2,
"style": "character",
"direction": "up"
},
"align": {
"horizontal": "center"
}
},
"start": 0,
"length": 5
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1280,
"height": 720
}
}
}
Typewriter subtitle effect
Create text that appears character by character:
{
"timeline": {
"background": "#000000",
"fonts": [
{
"src": "https://shotstack-assets.s3.amazonaws.com/fonts/SpecialElite-Regular.ttf"
}
],
"tracks": [
{
"clips": [
{
"asset": {
"type": "rich-text",
"text": "Let me tell you a story...",
"width": 900,
"height": 150,
"font": {
"family": "SpecialElite-Regular",
"size": 42,
"color": "#ffffff"
},
"animation": {
"preset": "typewriter",
"speed": 1.5,
"style": "character"
}
},
"start": 0,
"length": 5
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1280,
"height": 720
}
}
}
Basic usage
A simple rich-text element requires only text, dimensions, and font properties:
{
"asset": {
"type": "rich-text",
"text": "Welcome to Shotstack",
"width": 800,
"height": 400,
"font": {
"family": "Roboto",
"size": 48,
"color": "#ffffff"
}
},
"start": 0,
"length": 5
}
This creates white Roboto text at 48px within an 800×400 pixel container. The width and height define the text's maximum area, and text is centered by default. The clip appears at the beginning of the timeline and lasts 5 seconds.
Fonts
The font properties control the core typography of your text. Choose from built-in fonts or load custom fonts to match your brand. Font styling is broken down into seven properties:
fontstylestrokeshadowalignanimation
Font properties
Customize the appearance of your text with font styling options:
{
"asset": {
"type": "rich-text",
"text": "Styled Text",
"width": 800,
"height": 400,
"font": {
"family": "Roboto",
"size": 64,
"weight": 800,
"color": "#ff6b6b",
"opacity": 0.9
}
},
"start": 0,
"length": 5
}
This creates bold italic text using Roboto (weight 800) at 64px with a coral red color at 90% opacity.
Font options:
family- Font name (default: "Roboto")size- Font size in pixels, 12-200 (default: 48)weight- Font weight: 100-900 or "normal", "bold" (default: "400")color- Hex color code (default: "#ffffff")opacity- Text opacity, 0-1 (default: 1)
Available fonts
Built-in fonts:
- Roboto
- Montserrat
- Open Sans
- Work Sans
- Uni Neue
- Arapey
- Clear Sans
- Didact Gothic
- Movie Letter
- Permanent Marker
- Sue Ellen Francisco
Custom fonts
Use your own fonts by providing a URL to an OTF or TTF font file:
{
"timeline": {
"background": "#FFD166",
"fonts": [
{
"src": "https://shotstack-assets.s3.amazonaws.com/fonts/PressStart2P-Regular.ttf"
}
],
"tracks": [
{
"clips": [
{
"asset": {
"type": "rich-text",
"text": "GAME OVER",
"width": 1000,
"height": 400,
"font": {
"family": "Press Start 2P",
"size": 60,
"color": "#EF476F"
}
},
"start": 0,
"length": 5
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1280,
"height": 720
}
}
}
The fonts array loads external fonts that you can then reference in the font.family property. The font file must be publicly accessible, and the family name must match the filename exactly.
International fonts
Shotstack supports everything from Arabic calligraphy to Devanagari ligatures, as long as the font provides the necessary glyphs.
Hindi
{
"timeline": {
"background": "#FFD166",
"fonts": [
{
"src": "https://shotstack-assets.s3.amazonaws.com/fonts/Hind-Regular.ttf"
}
],
"tracks": [
{
"clips": [
{
"asset": {
"type": "rich-text",
"text": "GAME OVER",
"width": 1000,
"height": 400,
"font": {
"family": "Hind-Regular",
"size": 60,
"color": "#EF476F"
}
},
"start": 0,
"length": 5
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1280,
"height": 720
}
}
}
Chinese (Simplified)
{
"timeline": {
"background": "#CD071E",
"fonts": [
{
"src": "https://shotstack-assets.s3.amazonaws.com/fonts/NotoSansTC-VariableFont_wght.ttf"
}
],
"tracks": [
{
"clips": [
{
"asset": {
"type": "rich-text",
"text": "千里之行，始于足下。",
"width": 1000,
"height": 400,
"font": {
"family": "NotoSansTC-VariableFont_wght",
"size": 75,
"color": "#FABC3C"
}
},
"start": 0,
"length": 5
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1280,
"height": 720
}
}
}
Text styling
Beyond fonts, text styling properties control spacing, transformations, and decorations. These properties help create modern, spacious layouts and emphasize important text.
Letter spacing and line height
Adjust text layout with spacing and transformation options:
{
"timeline": {
"tracks": [
{
"clips": [
{
"asset": {
"type": "rich-text",
"text": "Spaced Out Text",
"width": 1000,
"height": 400,
"font": {
"family": "Roboto",
"size": 48,
"color": "#ffffff"
},
"style": {
"letterSpacing": 35,
"lineHeight": 1.5,
"textTransform": "uppercase",
"textDecoration": "underline"
}
},
"start": 0,
"length": 5
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1280,
"height": 720
}
}
}
This adds 35 pixels between characters, increases line height to 2× the font size (more space between lines), converts text to uppercase, and adds an underline.
Style options:
letterSpacing- Space between characters in pixels (default: 0)lineHeight- Relative line height, 0-10 (default: 1.2)textTransform- "none", "uppercase", "lowercase", "capitalize" (default: "none")textDecoration- "none", "underline", "line-through" (default: "none")
Gradients
Gradients add visual interest by transitioning between colors. Use linear gradients for modern, directional effects, or radial gradients for spotlight and glow effects. Gradients work best with bold, large text and override the font color property.
Linear gradient
Create text with a smooth color transition from one color to another:
{
"timeline": {
"tracks": [
{
"clips": [
{
"asset": {
"type": "rich-text",
"text": "MILKSHAKE",
"width": 900,
"height": 400,
"font": {
"family": "Montserrat",
"size": 125,
"weight": 800
},
"style": {
"gradient": {
"type": "linear",
"angle": 45,
"stops": [
{
"offset": 0,
"color": "#C6FFDD"
},
{
"offset": 0.5,
"color": "#FBD786"
},
{
"offset": 1,
"color": "#f7797d"
}
]
}
}
},
"start": 0,
"length": 5
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1280,
"height": 720
}
}
}
A three-color gradient transition at a 45-degree diagonal. The angle controls the direction (0° is left to right, 90° is top to bottom), and stops define colors at specific positions (0 is start, 0.5 is middle and 1 is end).
Radial gradient
Create text with a color that radiates from the center outward:
{
"timeline": {
"background": "#FFFFFF",
"tracks": [
{
"clips": [
{
"asset": {
"type": "rich-text",
"text": "NOVA",
"width": 900,
"height": 400,
"font": {
"family": "Montserrat",
"size": 200,
"weight": 800
},
"style": {
"gradient": {
"type": "radial",
"stops": [
{
"offset": 0,
"color": "#ffd89b"
},
{
"offset": 0.5,
"color": "#f6416c"
},
{
"offset": 1,
"color": "#2d3561"
}
]
}
}
},
"start": 0,
"length": 5
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1280,
"height": 720
}
}
}
The gradient radiates from yellow at the center through pink at the midpoint to dark blue at the edges. Radial gradients create a spotlight or glow effect and work best with centered text.
Gradient options:
type- "linear" or "radial" (default: "linear")angle- Gradient angle in degrees, 0-360 (default: 0, only for linear)stops- Array of color stops (minimum 2 required)offset- Position of stop, 0-1 (required)color- Hex color code (required)
Gradients require at least 2 color stops. Use 2-4 stops for smooth, professional gradients. More stops can create banding effects. When using gradients, the gradient fill overrides the font.color property.
Stroke
Add a bold outline around text for visibility and impact:
{
"asset": {
"type": "rich-text",
"text": "Outlined Text",
"width": 800,
"height": 400,
"font": {
"family": "Permanent Marker",
"size": 72,
"color": "#ffffff"
},
"stroke": {
"width": 4,
"color": "#000000",
"opacity": 1
}
},
"start": 0,
"length": 5
}
The 4-pixel black stroke creates a bold outline that makes white text readable over any background. Stroke width of 3-6 pixels works well for most text sizes. Combine stroke with shadow for maximum visibility.
Stroke options:
width- Stroke width in pixels (default: 0)color- Hex color code (default: "#000000")opacity- Stroke opacity, 0-1 (default: 1)
Shadow
Add depth and improve readability with drop shadows:
{
"timeline": {
"background": "#F9DB6A",
"tracks": [
{
"clips": [
{
"asset": {
"type": "rich-text",
"text": "MONDAY",
"width": 1000,
"height": 400,
"font": {
"family": "Montserrat",
"size": 175,
"color": "#432963",
"weight": 900
},
"shadow": {
"offsetX": 8,
"offsetY": 8,
"blur": 6,
"color": "#77E6F0",
"opacity": 0.8
}
},
"start": 0,
"length": 5
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1280,
"height": 720
}
}
}
The shadow appears 8 pixels down and to the right with an 6-pixel blur, creating a soft depth effect. Lower opacity (0.5-0.8) creates subtle shadows, while higher opacity (0.9-1.0) creates dramatic shadows.
Shadow options:
offsetX- Horizontal offset in pixels (default: 0)offsetY- Vertical offset in pixels (default: 0)blur- Blur radius in pixels (default: 0)color- Hex color code (default: "#000000")opacity- Shadow opacity, 0-1 (default: 0.5)
Alignment
Position text within its container using horizontal and vertical alignment:
{
"timeline": {
"tracks": [
{
"clips": [
{
"asset": {
"type": "rich-text",
"text": "\"The mystery of human existence lies not in just staying alive, but in finding something to live for.\" \n \n- Fyodor Dostoevsky",
"width": 500,
"height": 600,
"font": {
"family": "Open Sans",
"size": 48
},
"align": {
"horizontal": "left",
"vertical": "top"
}
},
"start": 0,
"length": 5
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1280,
"height": 720
}
}
}
This positions text in the top-left corner of the 500x600 container. Text is centered both horizontally and vertically by default.
Alignment options:
horizontal- "left", "center", "right" (default: "center")vertical- "top", "middle", "bottom" (default: "middle")
Animations
Text animations bring your text to life. Choose from preset animations like typewriter, fade-in, slide-in, and more. Control animation speed and duration to match your video's pacing. Animations are perfect for intros, subtitles, and attention-grabbing titles.
Example: Fade-in animation
Create text that smoothly fades into view:
{
"timeline": {
"tracks": [
{
"clips": [
{
"asset": {
"type": "rich-text",
"text": "Ascend while others stay idle",
"width": 800,
"height": 400,
"font": {
"family": "Roboto",
"size": 60,
"color": "#ffffff"
},
"animation": {
"preset": "typewriter",
"duration": 2,
"style": "word"
}
},
"start": 0,
"length": 5
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1280,
"height": 720
}
}
}
The text fades in over 2 seconds. The optional duration parameter controls how long the animation takes, with the default being set to the length of the clip. The animation starts when the clip begins.
Available animation presets
fadeIn
"animation": {
"preset": "fadeIn", // Animation type
"duration": 2, // Animation length (default: full clip)
"style": "character" // "word", "character", or "full" (default)
}
typewriter
"animation": {
"preset": "typewriter", // Animation type
"duration": 2, // Animation length (default: full clip)
"style": "character" // "word" or "character" (default: character)
}
slideIn
"animation": {
"preset": "slideIn", // Animation type
"duration": 2, // Animation length (default: full clip)
"style": "character", // "word" or "character" (default)
"direction": "left" // "left" (default), "right", "up", "down"
}
ascend
"animation": {
"preset": "ascend", // Animation type
"duration": 2, // Animation length (default: full clip)
"direction": "up" // "up" (default), "down"
}
shift - Text shifts from a direction with fade
"animation": {
"preset": "shift", // Animation type
"duration": 2, // Animation length (default: full clip)
"style": "character", // "word" or "character" (default)
"direction": "left" // "left" (default), "right", "up", "down"
}
Related topics
- Animations - Animate clip properties over time
- Positioning - Position and scale rich-text assets