Home / Cultural and Aesthetic / Cottagecore
Cottagecore CSS Template, Free with Live Demo
Free cottagecore website template for a jam and flower farm shop. Gingham, CSS flowers, scalloped edges, an arched frame and handwritten labels. Live demo. The example is Bramble and Bee, a farm jam shop.
What is cottagecore?
Cottagecore is the cozy, romantic look of country life: gingham cloth, wildflowers, jam jars, lace and handwriting. It feels slow and homemade, which suits small farm shops and makers.
Everything is drawn in CSS. The gingham is two crossing stripes, the scalloped edge is a repeating radial gradient, the flowers are four circles and a center, and each jar has a gingham lid and a handwritten label.
Good for
- Farm shops and bakeries
- Florists and gardeners
- Handmade and craft sellers
- Tea rooms and small cafes
What you get in this template
- Gingham pattern made with two gradients
- Scalloped edges with a radial gradient
- Arched frame with a dashed stitch line
- Jam jars with gingham lids and handwritten labels
- CSS flowers made from five circles
The key CSS
This is the part that makes the cottagecore look work. Copy it into your own project.
.ging {
background-color: #fff;
background-image:
linear-gradient(90deg, rgba(232,165,165,.45) 50%, transparent 50%),
linear-gradient(rgba(232,165,165,.45) 50%, transparent 50%);
background-size: 24px 24px;
}
.scal { height: 20px;
background: radial-gradient(circle at 12px 0, transparent 12px, #fbf5ea 12.5px) 0 0 / 24px 20px repeat-x; }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 cottagecore?
It is an aesthetic inspired by romantic country life: floral prints, gingham, baking, gardening and a slow, cozy pace.
How do you make a gingham pattern in CSS?
Layer a horizontal and a vertical stripe gradient, each half transparent, and set background-size to the square size you want.
How do I make a scalloped border?
Use a repeating radial gradient with transparent circles along one edge, as in the .scal class above.
More Cultural and Aesthetic designs
081. Japandi
Mado, a ceramics and homeware shop
082. Scandinavian
Fjell, cabin rentals in Norway
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
089. Islamic Geometric
Riad Zellige, a guesthouse in Marrakech