Home / Color and Light / Pastel Dream
Pastel Dream CSS Template, Free with Live Demo
Free pastel website template for a baby clothing shop. Soft candy colors, CSS clouds, rounded product cards and add buttons. Live demo. The example is Cloud Nine, a baby clothing shop.
What is pastel dream?
Pastel design uses soft, light colors like baby pink, sky blue, mint, lemon and lilac. It feels gentle and happy, and works well for products for children, weddings and anything sweet.
The trick is to keep text a deep muted purple instead of black, so contrast stays good without breaking the soft mood. The floating clouds are one element each, with two round pseudo elements on top.
Good for
- Baby and kids shops
- Wedding and party brands
- Bakeries and sweet shops
- Apps for relaxation or journaling
What you get in this template
- Five color pastel palette
- Floating CSS clouds with soft shadows
- Product cards that pick up their own pastel color
- T-shirt shapes made with clip-path
- Deep purple text for good contrast
The key CSS
This is the part that makes the pastel dream look work. Copy it into your own project.
:root { --pink: #ffd9e4; --blue: #d6ecff; --mint: #d8f5e8; --lemon: #fff3c4; --lilac: #e8dcff; --ink: #4a4166; }
.cloud { background: #fff; border-radius: 60px; height: 50px; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 60px; height: 60px; top: -30px; left: 24px; }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 a pastel color palette?
It is a set of very light, soft colors with lots of white mixed in, like baby pink, sky blue, mint and lavender.
How do I keep pastel sites readable?
Use a dark, slightly colored text such as deep purple or navy. Pastel text on pastel backgrounds is too light to read.
How do you draw a cloud in CSS?
Use a rounded pill shape, then add two circles on top with ::before and ::after.
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
046. Earthy Natural
Rootstock Farm, an organic veg box
048. High Contrast Accessible
Brookfield Council, a local government site
049. Grainy Gradient
Late Signal, a podcast