Custom clip-path shapes for Elementor — 26 ready shapes plus your own path, with a second shape morphed to on hover.
Twenty-six ready shapes, a hover shape, and a text box for any clip-path you can write. Hover the three below — each one morphs to a second shape over its own transition.
The preset list holds the whole regular-polygon run. Pick one from the dropdown and the declaration is emitted for you — no coordinate is ever typed.
circle(), ellipse() and inset() are separate CSS functions, not polygon approximations — which is why a circle stays perfectly round at any aspect ratio while a 10-sided polygon does not.
Twenty-six presets in total — the eight above, the eight polygons before them, plus trapezoid, parallelogram, arrows, chevrons and the close cross
Choose Custom instead of a ready shape and the dropdown turns into a text box that accepts any valid declaration — including shapes no list will ever carry. Both images to the right are written by hand, and each one morphs to a second hand-written shape on hover.
normal
clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%);
hover
clip-path: polygon(0 0, 100% 12%, 100% 100%, 0 88%);
Hand-written mode takes any clip-path declaration you like, including inset(… round …) — a shape the preset list has no entry for.
All three go octagon → circle on hover. Only the timing differs: a snap, a considered ease, and a slow linear crawl that shows the geometry interpolating point by point.
Straight answers about what this one does, where it fits in a real build, and what it costs you to ship.
Read the documentation for this one, or write to us — a human answers inside a business day.
On the Style tab of the Image widget. Sky Addons for Elementor adds a Custom Clip Path section there rather than shipping a widget of its own, so you drop in a normal Elementor Image, open Style, and switch the effect on for that image.
No. This extension hooks the Elementor Image widget only, and the shape is written against the image tag inside it — there is no container, column or section support, and background images are not affected. To shape a whole section, place an Image widget inside it and clip that instead.
Twenty-six. Twelve regular polygons from triangle through decagon plus bevel and rabbet, six arrows and points, five decorative shapes including star, cross, speech bubble and frame, then circle, ellipse and inset. Pick one from the Shape Preset list with no coordinates to write.
Yes. Set Mode to Custom CSS and paste a full rule such as clip-path: polygon(50% 0%, 100% 100%, 0% 100%); into the field. The panel links out to Clippy, the visual generator the presets themselves came from, so you can drag points and copy the result straight in.
Yes. The section has Normal and Hover tabs, each with its own Mode switch, so you can pick a preset for the resting state and a different preset — or hand-written coordinates — for hover. The image then animates from one shape to the other under the pointer.
Because CSS can only interpolate between compatible shape functions. Circle and ellipse cannot morph into a polygon, so mixing those with any other preset jumps instantly. Two polygons animate smoothly only when both list the same number of points, which is why triangle to hexagon also snaps.
Three controls under the Transition heading: Duration and Delay, both sliders running 0 to 3 seconds in tenth-of-a-second steps, and Easing with five curves — ease, linear, ease in, ease out and ease in out, which is the default. They apply to the hover morph on that image.
No. A clip path only decides which pixels get painted; the image still occupies its full original box, so surrounding text and columns do not reflow around the new outline. Trim the leftover gap with the Image widget’s own width and margin controls if the shape leaves too much air.
Not from this section — the shape fields are single settings rather than per-breakpoint ones, so the desktop shape applies at every screen size. Percentage-based presets do rescale with the image, so a hexagon stays a hexagon; only swapping to a different outline on small screens is unavailable.
Neither. It ships in the free Sky Addons plugin, runs on free Elementor, and needs no custom CSS field or code snippet — the rule is generated from your selection. No JavaScript is loaded for it either, so the shape is applied by stylesheet alone.
