ForHosting KIT · Images

Vignette effect calculator

At strength 0.35, the corners of a 1920×1080 image keep 65% of their brightness, a 35% darkening, while the center stays untouched. Enter width, height and strength to get the corner factor and the center-to-corner distance in pixels. Free in your browser.

Free
Runs in your browser
No sign-up
Your data stays on your device

Run — free How it works & API

Use it from WebAPIEmailTelegramApp soon

Worked example

If you enter

Width: 1,920
Height: 1,080
Strength: 0.35

You get

Center factor: 1
Corner factor: 0.65
Corner vs center: 0.65
Corner darkening percent: 35

This vignette effect calculator turns an image width, image height, and strength setting into a clear brightness comparison between the center and the corners. It uses a normalized quadratic radial model: the center keeps a factor of one, while every corner receives the strongest requested reduction. The result includes the corner multiplier, the percentage darkening, and the center-to-corner pixel radius, making it useful for planning an effect before rendering it in an editor, shader, canvas, or image-processing pipeline.

Interpret the brightness factors before applying the effect

A vignette reduces brightness as pixels move away from the center of an image. This calculator expresses that change as a multiplier, which makes the result portable across editing tools and rendering code. The center factor is always 1, meaning the center retains its original brightness.

If the corner factor is 0.65, a corner keeps 65 percent of its original channel values under this simplified model, so its reduction relative to the center is 35 percent. A strength of 0 produces no change, while a strength of 1 makes the theoretical corner factor zero. The result does not modify or inspect an uploaded image; it estimates the mask itself from numeric inputs.

That distinction is useful when you need to compare settings, document a creative specification, or confirm what a slider value means before spending time rendering a large asset. Treat the multiplier as a mask value to apply to linear light or as an approximation when your editor works in a different color space.

Understand the quadratic radial model

The calculation places the image center at radial distance zero and normalizes the distance to any corner as one. At a normalized radius r, the brightness multiplier is 1 minus strength times r squared. Squaring the radius makes the center region change gradually and lets darkening accelerate toward the outer image.

At the exact center, r is zero, so the multiplier remains 1. At every corner, r is one, so the multiplier becomes 1 minus strength. Width and height determine the physical center-to-corner radius in pixels through the Pythagorean distance between half the width and half the height.

They do not change the normalized corner factor, because every rectangular image is normalized to its own corner radius. This is a deliberate, reproducible definition rather than a claim that every photo editor uses the same falloff curve. Software may expose midpoint, roundness, feathering, lens profiles, or gamma-aware blending, all of which can produce a different visual transition even when the corner multiplier matches.

Use the estimate in design and implementation workflows

Start with the final pixel dimensions of the image and a strength between zero and one. Use the returned corner factor when you need a compact requirement such as ‘corners retain 72 percent of center brightness.’ Use the darkening percentage when communicating with designers or comparing presets, since it states the reduction directly.

The pixel radius is helpful when implementing a canvas, WebGL, CSS-generated mask, or offline renderer because it gives the distance used to normalize each pixel. For any pixel, measure its distance from the center, divide by the reported corner radius, clamp the normalized value to one, square it, multiply by strength, and subtract from one. Multiply the source brightness by that result.

If your renderer works with RGB values encoded in sRGB, remember that direct channel multiplication is not physically identical to multiplying linear-light values, though it may be the intended artistic behavior. Test the resulting image visually, especially near edges, and adjust the curve or add a midpoint control when matching a particular editor rather than this defined quadratic model.

What you can do with it

Plan a photo-editing preset

Convert a proposed vignette strength into an explicit corner brightness multiplier before applying the preset to a collection.

Specify a shader mask

Use the corner radius and quadratic model to implement a deterministic radial darkening mask in a graphics pipeline.

Compare creative settings

Explain how two strength values differ in corner retention and percentage darkening without rendering every candidate image.

FAQ

What does a corner factor mean?

It is the brightness multiplier at each corner relative to the unchanged center. A factor of 0.7 means the corner retains 70 percent of the modeled center brightness.

Why are all four corners equal?

The model is centered and radial, so corners are the same normalized distance from the image center even when width and height differ.

Why do dimensions matter if the corner factor depends on strength?

Dimensions determine the center-to-corner radius in pixels, which is needed to normalize distances when implementing the mask across the image.

Does this alter my image?

No. It calculates numeric factors only and does not upload, decode, render, or return an image.

Will my photo editor produce exactly the same vignette?

Not necessarily. Editors add settings such as midpoint, roundness, feathering, lens profiles or gamma-aware blending, so the transition can look different even when the corner value matches this estimate.

Related tools

For developers — API access

Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.

API endpoint

POSThttps://api.kit.forhosting.com/image/vignette-estimate

Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.

Call it from your stack

curl -X POST https://api.kit.forhosting.com/image/vignette-estimate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"width":1920,"height":1080,"strength":0.35}'

const res = await fetch("https://api.kit.forhosting.com/image/vignette-estimate", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "width": 1920,
    "height": 1080,
    "strength": 0.35
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/image/vignette-estimate",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "width": 1920,
    "height": 1080,
    "strength": 0.35
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/vignette-estimate", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"width":1920,"height":1080,"strength":0.35}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"width":1920,"height":1080,"strength":0.35}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/vignette-estimate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Example request

{
  "width": 1920,
  "height": 1080,
  "strength": 0.35
}

Example response

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.vignette_estimate",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.

Pricing

Per request$0.002

Published price — no tokens, no invented credits. A failed task is never charged.

Limits

`max_mb`	15
`max_megapixels`	12

Errors

HTTP	Code	Meaning
`401`	`unauthorized`	Missing or invalid API key.
`402`	`insufficient_balance`	Your balance doesn't cover the task price.
`404`	`unknown_type`	That task type doesn't exist.
`429`	`rate_limited`	Too many requests. Use the webhook instead of polling.

Technical questions

What happens if strength is outside 0 to 1?

The request returns an invalid_input error because values outside the inclusive range do not belong to this model.

What does the API request cost?

Each API request costs $0.002. The browser version can run the same deterministic calculation locally.

Read the full KIT documentation →

Run — free