Nonlinear size CSS generator

This tool generates CSS to size elements based on the viewport size in a non-linear fashion for responsive webdesign. Place keypoints and assign a transition to the segments between them. The generator automatically creates media-queries and size calculations.

To edit a segment: Click inside of it and modify it's properties in the pane below.

Left point
Right point
Bezier A
Bezier B
Shown at scale: