Home / Color and Light / Earthy Natural
Earthy Natural CSS Template, Free with Live Demo
Free earthy website template for an organic farm. Sand, olive, moss and terracotta colors, organic blob shapes and a warm serif. Live demo. The example is Rootstock Farm, an organic veg box.
What is earthy natural?
Earthy design uses the colors of soil, plants and clay: sand, olive, moss green and terracotta. It feels warm, honest and close to nature, which is why food, farming and eco brands love it.
Soft organic shapes help. The vegetable blob uses an eight value border radius, the wave between sections is a clip-path, and even the buttons have one corner that is less rounded, like a leaf.
Good for
- Farms, food boxes and grocers
- Eco and sustainable brands
- Cafes and bakeries
- Garden centers and outdoor shops
What you get in this template
- Six color earth tone palette
- Organic blob shape with radial gradient vegetables
- Wavy section divider with clip-path
- Leaf shaped buttons and cards
- Box plans with one featured choice
The key CSS
This is the part that makes the earthy natural look work. Copy it into your own project.
:root { --sand: #efe6d6; --oat: #f7f1e6; --olive: #5f6b3c; --moss: #3c4526; --terra: #b8613e; }
.blob { aspect-ratio: 1;
border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%; }
.btn { border-radius: 40px 40px 40px 8px; }
.wave { clip-path: path('M0 30 Q 180 0 360 30 T 720 30 V60 H0 Z'); }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 colors are in an earthy palette?
Warm neutrals like sand and oat, greens like olive and moss, and a clay color like terracotta. Keep text a dark brown instead of pure black.
How do you make a blob shape in CSS?
Use border-radius with eight values, four for the horizontal radii and four for the vertical, like 58% 42% 55% 45% / 48% 58% 42% 52%.
How do I make a wavy section divider?
Use clip-path: path() with a curved line, or an inline SVG at the bottom of the section.
More Color and Light designs
041. Aurora Gradient
Solace, a skincare brand
042. Duotone
Harbor Film Festival
043. Monochrome
Atelier Verde, an architecture studio
044. Dark Mode First
Ledgerly, a budget app
045. Neon Cyberpunk
Voltage Arena, an esports tournament
047. Pastel Dream
Cloud Nine, a baby clothing shop
048. High Contrast Accessible
Brookfield Council, a local government site
049. Grainy Gradient
Late Signal, a podcast