Studio Ghibli Characters in CSS

Discover a collection of creative HTML and CSS code examples that bring Studio Ghibli characters to life with stunning visual effects and animations.

Le Voyage de Chihiro - Susuwatari

Le Voyage de Chihiro - Susuwatari

Author:
Laetitia Huriaux | September 26, 2020
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Kodama

Kodama

Author:
Andrés Nicolás Tonello | June 22, 2020
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Totoro Bus Stop with Grid Layout

Totoro Bus Stop with Grid Layout

Author:
Jackie Card | April 14, 2019
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Jumping Totoro CSS Animation

Author:
Emma Hastjarjanto | March 26, 2018
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
TOTORO in Rain

TOTORO in Rain

Author:
Motoko Ishii | October 28, 2017
Made with:
HTML (Pug) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Princess Mononoke Game

Princess Mononoke Game

Author:
Anna the Scavenger | July 6, 2017
Made with:
HTML / CSS (SCSS) / JS (Babel)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
react.js, react-dom.js, tweenmax.js, baffle.js
Miyazaki Tribute – with SVG and GSAP

Miyazaki Tribute – with SVG and GSAP

Author:
Nerdmanship | February 13, 2017
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
foundation.css, tweenmax.js

My Neighbor Totoro

Author:
tiffany choong | January 20, 2017
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Soot Ball [Ghibli CSS Series]

Soot Ball [Ghibli CSS Series]

Author:
chilli con code | December 9, 2016
Made with:
HTML (Pug) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Calcifer [Ghibli CSS Series]

Calcifer [Ghibli CSS Series]

Author:
chilli con code | December 8, 2016
Made with:
HTML (Pug) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Boh and Yubaba's Bird [Ghibli CSS Series]

Author:
chilli con code | December 8, 2016
Made with:
HTML (Pug) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Jiji [Ghibli CSS Series]

Jiji [Ghibli CSS Series]

Author:
chilli con code | December 7, 2016
Made with:
HTML (Pug) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
No-Face [Ghibli CSS Series]

No-Face [Ghibli CSS Series]

Author:
chilli con code | December 7, 2016
Made with:
HTML (Pug) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Totoro Flat [Ghibli CSS Series]

Totoro Flat [Ghibli CSS Series]

Author:
chilli con code | December 6, 2016
Made with:
HTML (Pug) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Catbus

Catbus

Author:
Adam Kuhn | September 29, 2016
Made with:
HTML (Haml) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Castle In The Sky CSS

Castle In The Sky CSS

Author:
Kirsten Rauffer | June 3, 2016
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Pixel Chibi Totoro

Pixel Chibi Totoro

Author:
mintlodica | November 23, 2015
Made with:
HTML (Pug) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Howl's Moving Castle

Howl's Moving Castle

Author:
Nathan Gordon | October 16, 2014
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js, tweenmax.js
CSS Kodama

CSS Kodama

Author:
Jack P | November 4, 2013
Made with:
HTML / CSS

About a code

Kodama (from Princess Mononoke) drawn and animated using CSS only.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨