Collection of hand-picked free HTML and CSS shape-outside examples from Codepen and other resources.

Related Articles

  1. CSS clip-path Examples
Demo image: Float Images with clip-pat + shape-outside

Author

  • yoksel

Made with

  • HTML / CSS (SCSS)

About a code

Float Images with clip-path + shape-outside

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: shape-outside - Face

Author

  • yuanchuan

Made with

  • HTML / CSS / JS

About a code

shape-outside - Face

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: shape-outside + grid - Steps

Author

  • Kristopher Van Sant

Made with

  • HTML / CSS

About a code

shape-outside + grid - Steps

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: A Tribute to Mary Blair

Author

  • Kristopher Van Sant

Made with

  • HTML / CSS

About a code

A Tribute to Mary Blair

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: shape-outside - Giraffe

Author

  • Kristopher Van Sant

Made with

  • HTML / CSS

About a code

shape-outside - Giraffe

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: CSS Grid and Shape-Outside Venn Diagram

Author

  • Adrian Roselli

Made with

  • HTML / CSS

About a code

CSS Grid and Shape-Outside Venn Diagram

A base model of a CSS Venn diagram that is accessible, responsive, and uses progressive enhancement.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Catpacks: Combining Clip Path & Shape Outside

Author

  • Allison Tarr

Made with

  • HTML / CSS (SCSS)

About a code

Catpacks: Combining Clip Path & Shape Outside

Use clip-path and shape-outside for wrapping your text round an image.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Shapes Ice Cream

Author

  • Adrian Payne

Made with

  • HTML / CSS (SCSS)

About a code

CSS Shapes Ice Cream

A simple example of "CSS Shapes" (i.e. the shape-outside property) in action with some text.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: clip-path + shape-outside

Author

  • Michelle Barker

Made with

  • HTML / CSS (SCSS)

About a code

clip-path + shape-outside

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: shape-outside - Experiment 4

Author

  • Kristopher Van Sant

Made with

  • HTML / CSS

About a code

shape-outside - Experiment 4

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: shape-outside - Experiment 3

Author

  • Kristopher Van Sant

Made with

  • HTML / CSS

About a code

shape-outside - Experiment 3

Experimenting with shape-outside within a layout. Somewhat responsive.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: shape-outside - Experiment 2

Author

  • Kristopher Van Sant

Made with

  • HTML / CSS

About a code

shape-outside - Experiment 2

Experimenting with shape-outside within a layout.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: shape-outside - Experiment 1

Author

  • Kristopher Van Sant

Made with

  • HTML / CSS

About a code

shape-outside - Experiment 1

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Starfish CSS Shape-Outside

Author

  • Stacy

Made with

  • HTML / CSS (SCSS)

About a code

Starfish CSS Shape-Outside

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: shape-outside with clip-path

Author

  • Stacy

Made with

  • HTML / CSS (SCSS)

About a code

shape-outside with clip-path

Using shape-outside you can wrap text around a shape, but adding clip-path allows for the shape to be cut out from the whole.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Shape Outside - Ellipse

Author

  • Stacy

Made with

  • HTML / CSS (SCSS)

About a code

Shape Outside - Ellipse

Demo of shape-outside: ellipse();

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Gabi

Made with

  • HTML / CSS / JS

About a code

shape-outside: polygon + SVG

Please drag the circles to reshape the polygon.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: CSS Shape

Author

  • Preethi Sam

Made with

  • HTML / CSS

About a code

CSS Shape

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Shapes is Beautiful

Author

  • yoksel

Made with

  • HTML / CSS (SCSS)

About a code

Shapes is Beautiful

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -