Image Circle Clipper CSS Editor

✒️ Edit
Last modified on

This tool will help you to circle-clip a div element and place an image on it as a background-image.

Result

CSS

HTML element

How to Use

  1. Edit the CSS, the result can be observed right away.

    Please do not change .my_object keyword class in the CSS.

    You can change it afterward on your own HTML page.

  2. We can use external URL as the background-image source.

  3. To convert small local file (under 500 KB) into base64 URI, use this base64 image converter. Then copy and paste the base64 to the background-image: url([paste here]).

    But since it can be a very lengthy group of characters, it's not recommended to be used here.

    Please use external URL instead.

  4. Click Reset button to revert it to its original state.
  5. Click Select button or double click the textarea to select the CSS.
  6. Click Top button to scroll up to the Result section.
  7. Click the HTML element text to select it.

Placement

On your HTML page, the CSS will need to be wrapped with <style> and </style>.

Place the styling (CSS) on top of the element.

Trimmer

The CSS from this tool can be compacted into a single line using this CSS Trimmer.