Radial-Gradient Extent Keywords Lookup
Compute circle radial-gradient extent radius from actual inside-box center and edge/corner distances; elliptical gradient keyword geometry excluded. Explicit supplied computed/layout context only; not a browser cascade/layout engine or cross-browser guarantee.
Description
A circular radial gradient can choose its radius by distance to box sides or corners.
A circular radial gradient can choose its radius by distance to box sides or corners.1
That circular geometry is distinct from solving an elliptical gradient or its color stops. Use Radial-Gradient Extent Keywords Lookup to evaluate the supplied inputs under the specific model below.
When to use Radial-Gradient Extent Keywords Lookup
Use Radial-Gradient Extent Keywords Lookup to evaluate the supplied inputs under the specific model below. Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
How to use Radial-Gradient Extent Keywords Lookup and understand its results
- Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
- Enter Box width px, Box height px, Center x, Center y, Extent using the field table and validation rules below, then run the tool.
- Read Circle extent radius px and interpret units, signs, ordering and placeholders as explained below.
- If the tool reports an input error, correct that field and rerun. A successful false result, empty match list or unknown-evidence placeholder has the specific meaning described here; check the limitations before applying the result.
| Input field | Meaning | Value type | Requirement |
|---|---|---|---|
| boxWidthPx | Box width px | number | Required; constraints below |
| boxHeightPx | Box height px | number | Required; constraints below |
| centerX | Center x | number | Required; constraints below |
| centerY | Center y | number | Required; constraints below |
| extent | Extent | string | Required; constraints below |
Enter nonnegative box width and height, a center within the box and one of closest-side, farthest-side, closest-corner or farthest-corner. Compute four side distances and four corner Euclidean distances, then take the requested minimum or maximum as the circular gradient radius. Zero dimensions are allowed. Elliptical gradients and CSS percentage resolution are not modeled.
radius = min/max of side distances or corner hypot distances according to the exact extent token Field order, units and branch conditions follow the implementation explanation above.
| Output field | Meaning | Value type |
|---|---|---|
| circleExtentRadiusPx | Circle extent radius px | number |
{
"input": {
"boxWidthPx": 100,
"boxHeightPx": 80,
"centerX": 20,
"centerY": 30,
"extent": "farthest-corner"
},
"output": {
"circleExtentRadiusPx": 94.33981132056603
}
}Limitations and assumptions
That circular geometry is distinct from solving an elliptical gradient or its color stops. Apply the exact scope and assumptions described above.
All listed fields require explicit values. Unexpected fields, incorrect types, nonfinite numbers and sparse arrays fail validation. Domain-specific bounds, alignments and supported tokens are stated above; extremely large inputs or outputs can also be rejected. These errors differ from successful results such as false, no matches or unknown evidence.
Alternative or Complementary methods
Use Multiple Backgrounds First-On-Top Order for a related task: Multiple background layers are listed from front to back.
Use mask-image Alpha vs Luminance Mode Lookup for a related task: Mask coverage can depend on alpha alone or on luminance multiplied by alpha.
References
-
Radial-Gradient Extent Keywords Lookup — tool.io
Similar or alternative tools
- Multiple Backgrounds First-On-Top Order
Multiple background layers are listed from front to back.
- mask-image Alpha vs Luminance Mode Lookup
Mask coverage can depend on alpha alone or on luminance multiplied by alpha.