Back to Free Tools
FREE TOOLS
SVG Duotone Filter Generator
Generate SVG and CSS filter source for a two-color grayscale mapping.
Dark endpoint hex RGB, Light endpoint hex RGB, Filter ID
duotone-filter.svg, duotone-filter.css, svg-duotone-filter-generator.report.json
Browser only
Runs locally in your browser. Your files, pasted content and generated output are not uploaded. Reset clears this tool’s working data.
This tool needs JavaScript. If it does not load, refresh the page and try again.
How to use this tool
- Enter values using the examples, or choose a local file where requested. Follow the displayed supported input shapes and limits.
- Choose Calculate result and inspect the complete result.
- Download result to save the primary file. Where supplied, additional links save source files and the full JSON report. Reset restores examples and clears output.
Examples
Dark endpoint hex RGB: #000000
Light endpoint hex RGB: #ffffff
Filter ID: duotone
Limitations
- Generate complete SVG filter definitions and CSS source. Use declared encoded-sRGB grayscale weights0.2126/0.7152/0.0722 and per-channel dark/light endpoint transfer,retaining source alpha. Opaque hex RGB/RGBA endpoints only;equal or reversed endpoints retain user order. ID1–64 ASCII letters/digits/underscore/hyphen,starting letter/underscore,for safe XML/CSS references. No image upload,automatic embedding/execution,spectral/ICC matching or full-page filter preview. Shared input/report limits apply.
- Text fields are limited to100,000 UTF16 units each and400,000 combined UTF8 bytes; file fields have their own displayed limits. Combined output is at most4MiB. Processing stops after30 seconds; tool-specific bounds may be tighter.
- Generated source is a downloadable result and is not executed here. Inspection does not establish remote behavior, trust or standards certification.
Related tools
No items found.