What is a focal point picker?

A focal point picker is a visual tool that helps you identify the most important part of an image (the focal point) and generates the corresponding CSS percentage coordinates. This is useful when using object-fit: cover to ensure the key subject is not cropped out in responsive layouts.

How do I use the focal point value in CSS?

Apply the generated value to the object-position property of your image element. For example, if the tool outputs 30% 70%, you would write: img { object-fit: cover; object-position: 30% 70%; }. This tells the browser to keep the point 30% from the left and 70% from the top centered within the container.

Does this tool work with background images?

Yes, the percentage values generated are also compatible with the background-position CSS property for elements using background-image. You can use the same X% Y% format to control which part of the background image remains visible.

Is my image uploaded to a server?

No. The focal point picker processes your image entirely within your browser using JavaScript and the HTML5 Canvas API. Your files never leave your device, ensuring complete privacy.

Focal Point Picker – Generate CSS object-position Online

Click any image to find its focal point and get the exact CSS percentages for perfect responsive cropping.

Drop your image here to pick a focal point

or browse files

Why Use a Focal Point Picker?

When you use object-fit: cover on images in CSS, the browser automatically crops the image to fill the container. Without guidance, the crop often cuts off the most important part of the image—like a person's face in a portrait or the product in a photo. The Focal Point Picker solves this by letting you visually select the "anchor" point. The generated object-position value tells the browser exactly which part of the image must remain centered, no matter how the container is resized.

Understanding the CSS Output

The percentages follow the standard CSS syntax: object-position: X% Y%. The X value is the distance from the left edge, and the Y value is the distance from the top edge. For example, object-position: 30% 75% keeps the focal point near the lower-left area of the image centered within the container. This technique is essential for responsive web design, especially for hero sections, cards, and thumbnails.

Related Tools for Web Designers

If you work with images for the web, you may also find these tools useful: Image Resizer to adjust dimensions before cropping, Bulk JPG to PNG Converter for format changes, and our MDN guide on object-position for deeper technical reference.

Focal Point Picker – Generate CSS object-position Online

Drop your image here to pick a focal point

Focal Point Coordinates

CSS Output

How to Use This Value

Why Use a Focal Point Picker?

Understanding the CSS Output

Related Tools for Web Designers