Home / Bold and Raw / Neo Brutalism
Neo Brutalism CSS Template, Free with Live Demo
Free neo brutalism website template with thick black borders, hard offset shadows and flat bright colors. Live demo, key CSS and single HTML download. The example is Stackd, an invoicing tool for freelancers.
What is neo brutalism?
Neo brutalism is the loud, confident style you see on Gumroad and many new startup sites. Everything has a thick black border, shadows are solid blocks with no blur, and colors are flat and bright like sticky notes.
It looks simple on purpose. There are no gradients and no soft edges, so the page feels honest and easy to scan. Buttons slide into their shadow when you click, which makes the style fun to use as well as to look at.
Good for
- SaaS and startup landing pages
- Tools for freelancers and creators
- Portfolios that want to stand out
- Product launch and waitlist pages
What you get in this template
- Thick 3px borders and solid offset shadows
- Buttons that press into their shadow on click
- Sample invoice card with dashed dividers
- Three feature cards in sticky note colors
- Lexend Mega headline font for a heavy look
The key CSS
This is the part that makes the neo brutalism look work. Copy it into your own project.
.box {
border: 3px solid #000;
box-shadow: 6px 6px 0 #000;
}
.btn { background: #ffd23f; border: 3px solid #000; box-shadow: 5px 5px 0 #000; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #000; }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 #000; }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 neo brutalism in web design?
It is a style built on thick black outlines, hard shadows with no blur, flat bright colors and bold type. It feels raw and friendly at the same time, and it became popular with startups and creator tools.
How do you make a neo brutalist shadow in CSS?
Use a box shadow with an offset and zero blur, such as box-shadow: 6px 6px 0 #000. Pair it with a solid 3px border in the same color.
Is neo brutalism good for conversions?
It can be. The strong contrast makes buttons very easy to spot. Keep the copy short and give each section one clear action.
More Bold and Raw designs
012. Raw Brutalist
KXLR, a community radio station
013. Swiss Grid
Grid Days, a design conference in Zurich
014. Bold Type Hero
Pace, a running club
015. Anti Design
Static Bloom, an indie record label
016. Y2K Revival
Starlite, a mixtape playlist site
017. Memphis
Confetti Co., a party planner
018. Retro Pixel
Frog Knight, an indie game launch page
019. Newspaper Editorial
The Harbor Gazette, a local news site