Skew Image

Skewing (shearing) slants an image: horizontal skew pushes the bottom edge sideways while the top stays put, like italic letters; vertical skew pushes one side up or down. It is used for dynamic banners, faux-3D mock-ups, slanted section dividers and fixing photos of signs taken at an angle. This tool shears by any angle up to 70°, enlarges the canvas so nothing is cut off, and fills the new corners with transparency or a colour you choose.

How to use this tool

1. Choose one or more images.
2. Enter the horizontal and/or vertical skew angle (negative values lean the other way).
3. Choose a transparent or coloured background for the empty corners.
4. Pick the output format and download the skewed images.

Formula

x′ = x + tan(h) × y, y′ = y + tan(v) × x; new width = width + |tan h| × height, new height = height + |tan v| × width

h and v are the horizontal and vertical angles. The transformation is an affine shear applied by the browser's canvas with high-quality smoothing, so straight lines stay straight and edges are anti-aliased. When both angles lean the same way, tan h × tan v must stay well below 1 (the tool allows up to 0.9); at 1 the picture would collapse onto a line. Angles with opposite signs never fold the picture; they only stretch it.

Example

A 1200 × 800 banner skewed 15° horizontally grows by tan 15° × 800 = 0.268 × 800 = 214 px, so the result is 1415 × 800 px (rounded up): the bottom edge slides 214 px to the right and two triangular corners are left transparent.