Home / Cultural and Aesthetic / Guochao
Guochao CSS Template, Free with Live Demo
Free guochao website template for a mooncake bakery. Modern Chinese style with red and gold, ink wash mountains, cloud patterns and a seal stamp. Live demo. The example is Moonrise Bakery, handmade mooncakes.
What is guochao?
Guochao, meaning national trend, is the modern Chinese style used by young brands in China today. It takes traditional elements, like red and gold, clouds, mountains in ink and seal stamps, and gives them a clean, modern layout.
Here it celebrates the Mid-Autumn Festival. The moon is a radial gradient, the mountains are two layered SVG curves, the clouds are a repeating SVG pattern and the red seal uses vertical Chinese text.
Good for
- Chinese bakeries, tea and food brands
- Lunar New Year and Mid-Autumn campaigns
- Chinese restaurants
- Cultural events and brands for Chinese audiences
What you get in this template
- Red and gold palette with jade accents
- Big Chinese headline in Noto Serif SC
- Ink wash mountain layers in SVG
- Cloud pattern and vertical seal stamp
- Mooncake product cards with double gold frames
The key CSS
This is the part that makes the guochao look work. Copy it into your own project.
:root { --red: #b3211e; --deep: #7c1512; --gold: #e0b25b; --paper: #f7efe0; }
.zh { font-family: "Noto Serif SC", serif; font-weight: 900; color: var(--gold); letter-spacing: .08em; }
.moon { border-radius: 50%;
background: radial-gradient(circle at 40% 35%, #fff4d0, #f1c979 60%, #d9a24b);
box-shadow: 0 0 80px rgba(240, 200, 120, .5); }
.seal { writing-mode: vertical-rl; background: var(--red); outline: 2px solid var(--red); }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 guochao style?
Guochao is a Chinese design trend that mixes traditional Chinese culture, such as red and gold, calligraphy, clouds and landscapes, with modern fashion and layout.
Which fonts work for Chinese websites?
Noto Serif SC and Noto Sans SC are free, cover simplified Chinese and look good at every size.
Can I use this for Lunar New Year?
Yes. Swap the moon for lanterns or the zodiac animal, and change the headline and products.
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
087. Bauhaus
Weimar Workshop, a design exhibition
088. Art Deco
The Gilded Lily, a cocktail bar