Home / Cultural and Aesthetic / Art Deco
Art Deco CSS Template, Free with Live Demo
Free Art Deco website template for a cocktail bar. Gold line patterns, a sunburst fan, double frames with diamonds and symmetry on deep green. Live demo. The example is The Gilded Lily, a cocktail bar.
What is art deco?
Art Deco is the glamorous style of the 1920s and 30s: gold on dark colors, fan and sunburst shapes, stepped frames and strict symmetry. Think grand hotels, old cinemas and cocktail bars.
The sunburst is a repeating conic gradient with its center cut out by a mask. The frame uses a border and an outline together, with two rotated squares as diamonds at the top and bottom.
Good for
- Bars, restaurants and hotels
- Weddings and events
- Jewelry and perfume brands
- Theaters and cinemas
What you get in this template
- Gold sunburst fan made with conic-gradient
- Double gold frame with diamond points
- Vertical pinstripe background
- Poiret One display type
- Menu with dotted leaders to the prices
The key CSS
This is the part that makes the art deco look work. Copy it into your own project.
.fan {
border-radius: 260px 260px 0 0;
background: repeating-conic-gradient(from -90deg at 50% 100%, #d4af61 0 2deg, transparent 2deg 12deg);
mask: radial-gradient(circle at 50% 100%, transparent 40px, #000 41px);
}
.frame { border: 2px solid #d4af61; outline: 1px solid #d4af61; outline-offset: 8px; }
.frame::before { width: 36px; height: 36px; border: 2px solid #d4af61; transform: rotate(45deg); }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 are the main features of Art Deco design?
Symmetry, geometric shapes like fans and chevrons, gold or metallic accents on rich dark colors, and tall elegant type.
How do you make a sunburst in CSS?
Use a repeating conic gradient that starts at the bottom center, with thin gold slices and transparent gaps.
Which fonts are Art Deco?
Poiret One, Limelight and Josefin Slab all have the tall, geometric feel of the 1920s.
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
089. Islamic Geometric
Riad Zellige, a guesthouse in Marrakech