Images & texture design · focused workspace

Image Signed Distance Field Generator

Convert an alpha or luminance silhouette into a grayscale signed distance field for shader, text and mask experiments.

Before / after previewEditable projectsLocal processing

Source → inspect → export

Open project

Preparing the worked example…

Your source & settings

Settings & options

Start with your images

Drop a still image here. PNG inputs preserve their original RGBA pixel values.

Choose images

Upload still PNG, JPEG, WebP or BMP images. Source images are limited to 1,048,576 pixels and 4,096 pixels per edge. Multiple selected files must total at most 20 MiB. PNG exports retain computed RGBA values; source metadata and color profiles are not copied.

Inspect your result

PREVIEW & EXPORT

Output file

Show RGB without alphaSmooth preview

Know what changed

Euclidean distance to opposite-class pixel centers, without subpixel edge reconstruction. Neutral gray is near the boundary; white is inside by default. Fully uniform silhouettes saturate to one extreme.

Choose another output above or open Export files.

Explore the example

Convert an alpha or luminance silhouette into a grayscale signed distance field for shader, text and mask experiments.

What you can inspect

The generated image and its dimensions.

Keep the result you need

Use the output selector to inspect each generated file, then download it. Save a project to keep source inputs and settings together. Result files and editable projects serve different purposes.

Processing & file support

Your working session

Processing runs locally in a worker with a 30-second cancellation limit. Undo and redo keep up to 20 edits in this tab. Project files include imported assets and are limited to 40 MiB. There is no automatic saving.

Public pages include advertising and optional analytics under our privacy policy. Review the method and any flagged output before sharing files.

Using Image Signed Distance Field Generator

Convert an alpha or luminance silhouette into a grayscale signed distance field for shader, text and mask experiments.

Try the built-in sample, then choose your own supported files.
Adjust silhouette channel, inside threshold, distance spread · pixels, invert field. Change one setting at a time so you can understand its effect.
Choose “Generate distance field”. Inspect the visual comparison before using the result.
Download the selected output, inspect other files in Export files and save a project if you want to reopen the same inputs.

Example

Try the built-in example, inspect the generated image and compare the result after changing one option.

Questions & answers

What does Image Signed Distance Field Generator do?

Convert an alpha or luminance silhouette into a grayscale signed distance field for shader, text and mask experiments.

What are the important limitations?

Can I save and reopen my work?

Yes. Save a project JSON file containing your inputs, settings and any imported assets. Projects are limited to 40 MiB. Undo/redo stores up to 20 edits in this session and is not saved in the project. There is no automatic saving.

How do imports and output previews work?

Upload still PNG, JPEG, WebP or BMP images. Source images are limited to 1,048,576 pixels and 4,096 pixels per edge. Multiple selected files must total at most 20 MiB. Text previews show up to 150,000 characters; downloads include the complete output. Tables show 50 rows per page; CSV files include all rows.