Duotone | Docizr

Skip to content

Language Reference

Language Elements

Fenced Code Block

Indented Code Block

Inline Elements

Hard Line Break

Raw Inline HTML

Extended Elements

Definition List

Escaping Characters

Right-to-Left Text

Special Characters and Symbols

Frontmatter and Metadata

Writing Accessibly in Markdown

Typography in Markdown

Original Markdown

GitHub Flavoured Markdown

Pandoc Markdown

Markdown Flavour Support Cross Reference

Start Writing In Markdown

Making Text Stand Out

Organising with Lists

Dividing Your Document

Organising with Tables

Writing Your First Article

Start Writing In Markdown

Making Text Stand Out

Organising with Lists

Dividing Your Document

Organising with Tables

Writing Your First Article

Create a Presentation

Make a Simple Photograph Library

Create a Presentation

Build Product Documentation

Language Reference

Fenced Code Block

Indented Code Block

Inline Elements

Hard Line Break

Raw Inline HTML

Extended Elements

Definition List

Escaping Characters

Right-to-Left Text

Special Characters and Symbols

Frontmatter and Metadata

Writing Accessibly in Markdown

Typography in Markdown

Original Markdown

GitHub Flavoured Markdown

Pandoc Markdown

Markdown Flavour Support Cross Reference

Text And Structure Output

Sequence Diagram

Entity Relationship Diagram

Requirement Diagram

ZenUML Sequence Diagram

Architecture Diagram

Event Modeling Diagram

Treemap Diagram

Ishikawa Diagram

TreeView Diagram

Diagram Styling

Text And Structure Output

Typography Showcase

Kerning and Spacing

Decorative Headings

Small Caps and Variants

Emoticons and Emoji

Non-Western Character Sets

Colour Reduction

Text Wrap and Image Layout

Diagram Showcase

Diagram Styling

Sequence Diagram

Entity Relationship Diagram

User Journey Diagram

Requirement Diagram

ZenUML Sequence Diagram

Architecture Diagram

Event Modeling Diagram

Treemap Diagram

Ishikawa Diagram

TreeView Diagram

Sequence Diagram

Entity Relationship Diagram

User Journey Diagram

Requirement Diagram

ZenUML Sequence Diagram

Architecture Diagram

Event Modeling Diagram

Treemap Diagram

Ishikawa Diagram

TreeView Diagram

Typography Showcase

Kerning and Spacing

Decorative Headings

Small Caps and Variants

Emoticons and Emoji

Non-Western Character Sets

Colour Reduction

Text Wrap and Image Layout

Diagram Showcase

Diagram Styling

Sequence Diagram

Entity Relationship Diagram

User Journey Diagram

Requirement Diagram

Architecture Diagram

Event Modeling Diagram

Treemap Diagram

Ishikawa Diagram

TreeView Diagram

About this website

ESC

No results found

Try a different search term

Did you mean: ?

Type at least 2 characters to search

↑↓ to navigate Enter to select Esc to close

Language Reference

Language Elements

Fenced Code Block

Indented Code Block

Inline Elements

Hard Line Break

Raw Inline HTML

Extended Elements

Definition List

Escaping Characters

Right-to-Left Text

Special Characters and Symbols

Frontmatter and Metadata

Writing Accessibly in Markdown

Typography in Markdown

Original Markdown

GitHub Flavoured Markdown

Pandoc Markdown

Markdown Flavour Support Cross Reference

Start Writing In Markdown

Making Text Stand Out

Organising with Lists

Dividing Your Document

Organising with Tables

Writing Your First Article

Start Writing In Markdown

Making Text Stand Out

Organising with Lists

Dividing Your Document

Organising with Tables

Writing Your First Article

Create a Presentation

Make a Simple Photograph Library

Create a Presentation

Build Product Documentation

Language Reference

Fenced Code Block

Indented Code Block

Inline Elements

Hard Line Break

Raw Inline HTML

Extended Elements

Definition List

Escaping Characters

Right-to-Left Text

Special Characters and Symbols

Frontmatter and Metadata

Writing Accessibly in Markdown

Typography in Markdown

Original Markdown

GitHub Flavoured Markdown

Pandoc Markdown

Markdown Flavour Support Cross Reference

Text And Structure Output

Sequence Diagram

Entity Relationship Diagram

Requirement Diagram

ZenUML Sequence Diagram

Architecture Diagram

Event Modeling Diagram

Treemap Diagram

Ishikawa Diagram

TreeView Diagram

Diagram Styling

Text And Structure Output

Typography Showcase

Kerning and Spacing

Decorative Headings

Small Caps and Variants

Emoticons and Emoji

Non-Western Character Sets

Colour Reduction

Text Wrap and Image Layout

Diagram Showcase

Diagram Styling

Sequence Diagram

Entity Relationship Diagram

User Journey Diagram

Requirement Diagram

ZenUML Sequence Diagram

Architecture Diagram

Event Modeling Diagram

Treemap Diagram

Ishikawa Diagram

TreeView Diagram

Sequence Diagram

Entity Relationship Diagram

User Journey Diagram

Requirement Diagram

ZenUML Sequence Diagram

Architecture Diagram

Event Modeling Diagram

Treemap Diagram

Ishikawa Diagram

TreeView Diagram

Typography Showcase

Kerning and Spacing

Decorative Headings

Small Caps and Variants

Emoticons and Emoji

Non-Western Character Sets

Colour Reduction

Text Wrap and Image Layout

Diagram Showcase

Diagram Styling

Sequence Diagram

Entity Relationship Diagram

User Journey Diagram

Requirement Diagram

Architecture Diagram

Event Modeling Diagram

Treemap Diagram

Ishikawa Diagram

TreeView Diagram

About this website

Duotone

v1 - latest

Home
Showcase
Image Showcase
Duotone

Approximate a two-colour duotone effect using CSS filter chains.

Original

Original colour image

Cool blue

Image with a cool blue duotone effect

Warm amber

Image with a warm amber duotone effect

Emerald

Image with an emerald green duotone effect

Previous Colour Reduction

Next Image Masking

On this page

Original
Cool blue
Warm amber
Emerald

© 2026 Docizr. All rights reserved.

On this page

Original
Cool blue
Warm amber
Emerald