– Create 3D shapes in CSS online

Learn how to create 3D shapes easily in CSS online right from your browser at without downloading any software.

Now, no need to call an expert for integrating illustrations or any other element in 3D graphics to your website or blog thanks to a web based editor named – Tridiv. The tool lets the designers and developers to create 3D shapes in CSS right from your browser and thus, makes the CSS incredibly powerful. This web based editor is perfect for logo animation where using JS would just not worth it.

Tridiv web based editor

Tridiv app is developed and created by Julian Garnier. The site is free to use, so you don’t need to buy any subscription. It has simple, handy yet comprehensive interface. As the interface is user-friendly; people without any experience with these kinds of softwares can use it easily. Currently, the site is compatible only with Chrome, Safari, and Opera. Later, it will support other browsers like Internet Explorer and Firefox.

The tool provides numerous examples before you actually start using it. You are able to view these examples and even edit them. You can create extremely sophisticated objects and animations with the help of it. There are four shapes (cuboid, cylinder, pyramid and prism) which are the building blocks for more complex ones. You can resize, color, and rotate every shape.

You are allowed to preview the work in single-click. After completing the work, you can save it on localStorage or export to Codepen for sharing with others. Tridiv provides you the HTML-CSS code. You will be taken to a traditional four-pane interface

To get started, you are not required to create an account or download any software. Just visit the website ( and press the “Start using the app” button. You will be taken to a traditional four-pane interface, where you can add shapes such as cubes, cylinders, prisms and pyramids. After adding them, you can adjust their positioning on the magnetic rack, dimensions and opacity.

You can even add different colors, lighting, shadows and images to each face of each shape (side, front, top). Once completed, you can name and save it on your local storage or export to Codepen. You can even view the preview of your creations. The tool provides the HTML and CSS code to integrate your projects into your pages. You are able to create unlimited projects.


  • Free and easy to use
  • No sign up process
  • No need to download any software
  • The simple yet comprehensive interface
  • Provide numerous examples
  • Let to create extremely sophisticated objects and animations
  • Provide the HTML and CSS code
  • Users can save their projects


  • It doesn’t work with IE and Firefox

Leave a Reply

Your email address will not be published. Required fields are marked *