Examples

Interactive slide examples demonstrating html2pptx-pro capabilities. Each section shows a slide preview — click Generate PPTX to download it, or use the button below to generate all slides at once.

1. Hero — Gradient Background

Linear gradient with flexbox centering.

Welcome to html2pptx-pro

Convert HTML to PowerPoint with ease

Gradients, flexbox centering, and modern styling — all preserved in your slides.

2. Typography

Dark background with multiple font sizes, weights, and colors.

Bold Title Text

A subtitle with muted color

Highlighted important text

Normal paragraph text with regular styling. This demonstrates how different text colors, sizes, and font weights render in PowerPoint output.

3. Feature Columns

Flexbox columns with rounded corners.

Feature Comparison

Feature A

High-fidelity rendering of HTML elements into PPTX slides

Feature B

Full CSS stacking context support with 7-layer painting order

Feature C

Simple API — pass an element, get a PowerPoint file

4. Service Cards

Card layout with borders.

Our Services

🚀

Fast Performance

Optimized for speed and efficiency.

🎨

Beautiful Design

High fidelity HTML to PPTX output.

⚡

Easy Integration

Simple API for your existing code.

5. Statistics Dashboard

Vertical gradient with large numbers.

Amazing Statistics

Our platform delivers outstanding results

99%

Satisfaction Rate

50K+

Active Users

24/7

Support Available

100+

Countries

6. Text Decoration

Bold, italic, underline, and strikethrough styles.

Text Style Examples

Bold text using font-weight

Italic text using font-style

Underlined text using text-decoration

Strikethrough text

Bold, Italic & Underlined Combined

Mixed formatting: bold red, italic green, and underline purple in one paragraph.

7. Lists

Unordered and ordered lists.

List Examples

Unordered List

First item with bullet
Second item in list
Third item here
Fourth and final item

Ordered List

Step one: Initialize
Step two: Configure
Step three: Execute
Step four: Validate

8. Data Table

Table with alternating row backgrounds.

Quarterly Report

Product	Q1 Revenue	Q2 Revenue	Growth
Enterprise Suite	$1,200,000	$1,450,000	+20.8%
Cloud Services	$890,000	$1,100,000	+23.6%
Support Packages	$450,000	$520,000	+15.5%
Training Programs	$180,000	$210,000	+16.7%

9. Border Styles

Solid, dashed, dotted, double, and mixed borders.

Border Variations

Solid Border

Dashed Border

Dotted Border

Double Border

Rounded Border

Mixed Borders

10. Nested Elements

Nested containers with rgba opacity.

Deep Nesting Test

Container Level

Level 1 - Blue

Level 2 - Green

Level 3 - Yellow (deepest)

Badge 1Badge 2Badge 3

11. Images & Object-Fit

Different `object-fit` values on images inside fixed-size containers.

Image Object-Fit

contain

cover

fill

scale-down

12. Opacity & Transparency

CSS `opacity` property and `rgba()` background colors with overlapping elements.

Opacity & RGBA

1.0

0.8

0.6

0.4

0.2

rgba(1.0)

rgba(0.8)

rgba(0.6)

rgba(0.4)

rgba(0.2)

Blue 0.7

Green 0.7

Purple 0.7

Orange 0.7

Pink 0.7

13. Font Families & Typography

Font families, type scale, weights, and line heights.

Typography Showcase

Font Families

Times New RomanArialCourier NewGeorgiaVerdanaTahomaImpact

Type Scale

10px14px18px24px32px42px

Font Weights

Normal (400)Semi-Bold (600)Bold (700)Black (900)

Line Heights

Line-height: 1.0 — Text lines are tightly packed together.

Line-height: 1.5 — Comfortable reading spacing for body text.

Line-height: 2.0 — Double-spaced text with generous vertical room.

14. Gradient Variations

Multiple gradient directions, multi-stop gradients, and gradient text.

Gradient Gallery

to right

to bottom

45deg

3-stop (90deg)

3-stop (180deg)

4-stop (270deg)

Hard stops

% stops

Diagonal 3-stop

Gradient Text Effect

15. Advanced Positioning

Absolute positioning inside relative containers, and a badge overlay on a card.

CSS Positioning

Absolute inside Relative:

top-left

top-right

center

bottom-left

bottom-right

Badge Overlay on Card:

NEW

Product Card

A card with an absolutely positioned badge overlay in the top-right corner.

16. Advanced List Styles

Various list-style-type values, nested lists, and spaced items.

List Style Variations

Unordered Styles

Disc style item 1
Disc style item 2

Circle style item 1
Circle style item 2

Square style item 1
Square style item 2

Ordered Styles

Decimal item one
Decimal item two
Decimal item three

Leading-zero item
Leading-zero item
Leading-zero item

Nested & Spaced

Top-level item
- Nested level 2
  - Nested level 3
Another top-level

Spaced item A
Spaced item B
Spaced item C

17. Text Alignment

Explicit `text-align` left, center, and right comparison.

Text Alignment

Left Aligned

This text is aligned to the left side of its container.

Second line also left aligned.

Center Aligned

This text is centered within its container.

Second line also centered.

Right Aligned

This text is aligned to the right side.

Second line also right aligned.

Left: Price list

Center: Total amount

Right: $1,234.56

18. CJK Lists

CJK (Chinese, Japanese, Korean) list numbering styles.

CJK List Styles

cjk-ideographic

第一项
第二项
第三项

trad-chinese-informal

第一項
第二項
第三項

japanese-formal

第一項
第二項
第三項

korean-hangul-formal

첫 번째
두 번째
세 번째

19. Rounded Gradients

Linear gradients with various border-radius values.

Rounded Gradients

rounded-none

rounded-lg

rounded-2xl

rounded-3xl

rounded-full

Vertical
Gradient

Horizontal
Gradient

Diagonal
Gradient

Diagonal
Opposite

20. Gradient Opacity

Semi-transparent gradients using rgba() and transparent keyword.

Gradient Opacity

rgba → transparent

rgba to rgba

transparent → solid

Semi-transparent

Pink → Orange

Fade in/out

21. Visibility

Elements with `visibility: hidden` and `display: none` comparison.

Visibility vs Display

Normal (visible)

visibility: hidden

Space is preserved

display: none

Space is removed

22. Clip Text

Text with `background-clip: text` for gradient text effects.

Background Clip Text

Gradient Text

Multi-Color Gradient

Rainbow Effect

23. URL Images

Images loaded from URL via `data-file` attribute.

URL-Based Images

Icon (SVG)

Chart (SVG)

Images are loaded via `withBase()` for correct path resolution in VitePress.

24. Rotate Transform

Elements with CSS transform rotate.

Rotate Transform

No Rotate

rotate(12deg)

rotate(45deg)

rotate(-12deg)

rotate(-45deg)

90°

180°

-90°

25. Box Shadow

Various box-shadow effects.

Box Shadow

shadow-sm

shadow

shadow-md

shadow-lg

shadow-xl

shadow-2xl

Glow Blue

Glow Red

Glow Green

26. Clip Path

Elements clipped with various CSS clip-path shapes.

Clip Path

circle

ellipse

triangle

hexagon

star

inset

27. Canvas Element

HTML `<canvas>` with programmatic 2D drawing — bar chart with labels.

Canvas Drawing

Chart Legend

January

February

March

April

May

June

Canvas content is rasterized as an image in the PPTX output.

28. Form Inputs

Native HTML form elements — text inputs, textarea, select, checkboxes, radios, and buttons.

Form Elements

Text Inputs

Username

Password

Message

Buttons & Placeholder

Search (placeholder)

Disabled Input

29. Multi-Slide Demo

Creating a multi-slide presentation from an array of elements — each element becomes its own slide.

Examples ​

1. Hero — Gradient Background ​