Home / Cultural and Aesthetic / Bauhaus
Bauhaus CSS Template, Free with Live Demo
Free Bauhaus website template for a design exhibition. Red, yellow and blue, circles, squares and triangles on a strict grid poster layout. Live demo. The example is Weimar Workshop, a design exhibition.
What is bauhaus?
Bauhaus was a German design school from 1919. Its style is simple and bold: primary colors, basic shapes and clean geometric letters, with every element doing a job.
The hero is a poster built on a CSS grid. Each cell is one color or one shape, a circle, a triangle or a bar, and the headline sits in its own cell in lower case, as Bauhaus designers liked.
Good for
- Exhibitions and museums
- Design schools and studios
- Posters and event pages
- Architecture and furniture brands
What you get in this template
- Poster layout built with CSS Grid
- Circle, triangle and bar shapes in pure CSS
- Primary red, yellow and blue palette
- Lower case headings like classic Bauhaus type
- Grid folds into two columns on phones
The key CSS
This is the part that makes the bauhaus look work. Copy it into your own project.
.poster {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 180px);
border: 3px solid #111;
}
.c1 { grid-column: 1 / 3; grid-row: 1 / 3; background: #f7b801; }
.c1::after { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: #d62828; }
.c3::after { background: #111; clip-path: polygon(50% 0, 100% 100%, 0 100%); }How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
What is Bauhaus style?
It is a design style from the Bauhaus school in Germany, known for primary colors, simple geometric shapes, clean type and a focus on function.
Which font looks like Bauhaus?
Geometric sans serifs like Josefin Sans, Futura or Jost come close to the Bauhaus look.
How do I make a triangle in CSS?
Use clip-path: polygon(50% 0, 100% 100%, 0 100%) on a block with a background color.
More Cultural and Aesthetic designs
081. Japandi
Mado, a ceramics and homeware shop
082. Scandinavian
Fjell, cabin rentals in Norway
083. Cottagecore
Bramble and Bee, a farm jam shop
084. Dark Academia
Ravenhall, a reading society
085. Vaporwave
Palm Mall FM, a synth music label
086. Solarpunk
Sunroot, a community solar co-op
088. Art Deco
The Gilded Lily, a cocktail bar
089. Islamic Geometric
Riad Zellige, a guesthouse in Marrakech