jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas CSS

Gratis Generador de funcion CSS shape()

Genere funciones CSS shape() para formas no rectangulares con clip-path y shape-outside.

Cargando herramienta...

Qué es Generador de funcion CSS shape()?

The CSS shape() function is a new shape primitive that unifies and extends the legacy shape functions (polygon(), circle(), ellipse(), path(), inset(), rect()). Unlike earlier shape functions, shape() supports percentage coordinates that are relative to the element's own dimensions, not just pixel coordinates. It also supports reference box keywords (margin-box, padding-box, content-box, border-box) that define the coordinate system, and shapes created with shape() can be interpolated for smooth CSS transitions and animations between different shape types.

Respuesta rápida

CSS shape() creates non-rectangular shapes for clip-path and shape-outside with percentage coordinates relative to element size, reference box support, and animatable transitions between polygon, circle, ellipse, path, and rect types. Chrome 139+, Safari 18.2+ (Baseline 2026). Always include a fallback shape function for unsupported browsers.

Limitaciones

  • Browser support is limited to Chrome 139+, Edge 139+, and Safari 18.2+ as of mid-2026. Firefox does not support shape() yet, and older browsers ignore the entire declaration. A fallback shape function is required for broad compatibility.
  • shape() polygon requires explicit units (px or %) on each coordinate value, unlike the legacy polygon() function which accepts bare numbers. This makes the syntax more verbose and error-prone when migrating from existing polygon() declarations.
  • Not all shape types interpolate cleanly with each other. While shape() supports cross-type animation, transitions between vastly different geometries (for example, rect to a complex path) may produce unexpected intermediate shapes. Test animations visually before deploying.

Cómo usar esta herramienta

  1. Select the shape type: polygon (list of coordinate pairs), circle (center and radius), ellipse (center plus x-radius and y-radius), path (SVG path data), or rect (top, right, bottom, left with optional rounding).
  2. Choose the reference box: margin-box, padding-box, content-box, or border-box. The reference box determines the coordinate system for percentage-based coordinates.
  3. Configure the shape coordinates. For polygons, add coordinate point pairs. For circles and ellipses, set the center position and radius values. Enable animation-friendly mode to ensure shape values use compatible syntax for CSS transitions.
  4. Copy the generated shape() CSS and apply it to the clip-path or shape-outside property. Add a fallback using the legacy shape functions for browsers that do not support shape() yet.

Para qué puedes usarla

  • Create non-rectangular image masks for hero sections and featured content cards using clip-path with shape() polygon and percentage coordinates.
  • Wrap text around circular or elliptical images using shape-outside with shape() circle and padding-box reference for consistent spacing.
  • Animate between a polygon and a circle shape on hover or scroll using CSS transitions, since shape() supports interpolation between different shape types.

Casos de uso

Ejemplos prácticos

Ejemplo

Animated hero image mask

A landing page shows a hero image clipped as a polygon on load, then transitions to a full rectangle on scroll. Using shape() polygon with percentage coordinates, the clip-path animates smoothly from a hexagonal shape to a full rectangle. Provide clip-path: none as the fallback for browsers without shape() support.

Ejemplo

Text wrapping around a circular profile photo

A blog profile page has a circular photo that text wraps around. Using shape-outside: shape() circle at 50% 50% with 50% radius and padding-box reference, the text wraps tightly around the image. The percentage-based radius scales with the image size for responsive layouts.

Errores comunes

  • Using pixel coordinates in shape() when percentage coordinates would be more responsive -- percentage coordinates in shape() adapt to the element size, while pixel coordinates break on resize. Use percentage values unless exact pixel alignment is required.
  • Assuming shape() polygon uses the same comma-separated bare number syntax as polygon() -- shape() requires explicit units (px or %) on each coordinate value, making the syntax more verbose than the legacy function.
  • Applying shape() without a fallback for older browsers -- shape() is supported in Chrome 139+, Edge 139+, and Safari 18.2+ but not in Firefox. Unsupported browsers ignore the entire declaration. Always provide a fallback shape declaration before the shape() rule.

Verificación

  1. In Chrome 139+, apply the generated shape() CSS to an element with clip-path and inspect the computed style. Resize the viewport to confirm percentage coordinates scale correctly relative to the element size.
  2. Add a CSS transition on clip-path and toggle between two shape() values (polygon and circle) on hover. Verify the transition animates smoothly between the two shapes without visual glitches or jumps.

FAQ

Preguntas sobre Generador de funcion CSS shape()

How does shape() differ from polygon(), circle(), and the other legacy shape functions?

shape() is a unified replacement for polygon(), circle(), ellipse(), path(), inset(), and rect(). Its key advantages are: percentage coordinates relative to the element's own dimensions rather than the reference box size, explicit reference box keywords (margin-box, padding-box, content-box, border-box), and the ability to animate between different shape types. The legacy functions cannot interpolate across shape types -- you cannot transition from polygon() to circle() with the old functions, but shape() supports this.

Can I animate between a polygon and a circle using shape()?

Yes. With the older polygon() function, you could only animate between two polygons with the same number of vertices. With shape(), you can animate between any two supported shape types as long as the coordinate values are compatible for interpolation. Enable animation-friendly mode in this generator to ensure the generated values use compatible syntax for smooth CSS transitions between shapes.

What reference box should I use for shape-outside versus clip-path?

For shape-outside, the default reference box is margin-box, but padding-box is usually better because text should wrap to the padding area, not extend into the border or margin. For clip-path, the default is border-box, which clips the element including its border. Content-box is useful when you want to clip only the content area, excluding padding and border. The choice depends on whether the shape should include the element's spacing.

Which browsers support the CSS shape() function?

The shape() function is Baseline 2026, supported in Chrome 139+, Edge 139+, and Safari 18.2+. Firefox does not support shape() as of version 138. For production use, always include a fallback declaration using the legacy shape functions (polygon(), circle(), etc.) or clip-path: none before the shape() declaration. The fallback ensures styling works in all browsers while the shape() enhancement applies where available.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también