Home / Cultural and Aesthetic / Solarpunk
Solarpunk CSS Template, Free with Live Demo
Free solarpunk website template for a community solar co-op. Bright greens, a warm sun, buildings with rooftop gardens and solar panels in CSS. Live demo. The example is Sunroot, a community solar co-op.
What is solarpunk?
Solarpunk imagines a bright, green future where cities are full of plants and powered by the sun. It is the opposite of gloomy sci fi: warm, colorful and hopeful.
The city is built from rounded CSS buildings with gardens on every roof and solar panels made with a striped gradient and a skew. A glowing sun and big friendly numbers do the rest.
Good for
- Clean energy and climate startups
- Community groups and co-ops
- Eco and sustainable brands
- Urban farming and gardening projects
What you get in this template
- CSS city with rooftop gardens
- Solar panels made with a skewed striped gradient
- Glowing sun with a soft halo
- Big impact numbers on a green band
- Three step how it works cards
The key CSS
This is the part that makes the solarpunk look work. Copy it into your own project.
.bld { border-radius: 18px 18px 0 0; background: var(--c); }
.bld::before {
content: ""; position: absolute; left: -6px; right: -6px; top: -18px; height: 26px;
border-radius: 30px; background: #2d9d5c;
box-shadow: 10px -8px 0 -2px #2bb5a0, -12px -6px 0 -4px #6ccf8e;
}
.panel { background: repeating-linear-gradient(90deg, #1b4b8a 0 13px, #3a78c9 13px 15px); transform: skewX(-20deg); }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 solarpunk?
It is an art and design movement that pictures a sustainable future with renewable energy, lots of greenery and strong communities.
Which colors suit a solarpunk site?
Leaf greens, teal, sunny yellow and warm cream, with soft pinks and oranges for buildings.
Can I use this for a real co-op?
Yes. Change the numbers and text, and link the share button to your sign up form.
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
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