Home / Cultural and Aesthetic / Dark Academia
Dark Academia CSS Template, Free with Live Demo
Free dark academia website template for a book club. Old library browns, candlelight glow, Garamond type and a CSS bookshelf. Live demo. The example is Ravenhall, a reading society.
What is dark academia?
Dark academia is the look of old universities and candlelit libraries: deep browns, oxblood red, antique gold, classic serif type and a slightly mysterious mood.
The shelf of books is CSS blocks with gold bands. A single flickering candle made with a gradient and a glow gives the page its warmth, and the flicker stops for reduced motion.
Good for
- Book clubs and literary societies
- Bookshops and publishers
- Writing courses and tutors
- History and museum blogs
What you get in this template
- Deep brown palette with oxblood and gold
- CSS bookshelf with gold bands on each spine
- Flickering candle with a soft glow
- EB Garamond and Cinzel type pairing
- Monthly reading list layout
The key CSS
This is the part that makes the dark academia look work. Copy it into your own project.
:root { --bg: #1c1612; --gold: #b8955a; --oxblood: #6b1f24; --paper: #e9dfcc; }
body { font-family: "EB Garamond", serif;
background: radial-gradient(ellipse at 70% 10%, rgba(255,190,110,.12), transparent 50%), var(--bg); }
.candle::before {
background: radial-gradient(#fff6c2, #f4a340 70%);
box-shadow: 0 0 30px 10px rgba(244, 163, 64, .35);
animation: fl 2s ease-in-out infinite;
}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 dark academia?
It is an aesthetic based on classic literature, old universities and libraries, with dark earthy colors, tweed, candles and serif type.
Which fonts suit dark academia?
Classic serifs like EB Garamond, Cormorant or Libre Caslon for text, and Cinzel for small capitals and headings.
Is a dark page readable for long text?
Yes, if the text is a warm off white on dark brown and the font size is generous, as here at 19px.
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
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
089. Islamic Geometric
Riad Zellige, a guesthouse in Marrakech