Wave dividers are SVG shapes that smoothly separate page sections — the signature detail of modern hero sections, footers and app landing pages. SVG keeps them razor sharp at any screen size.
Tune amplitude, wavelength and layers, pick a fill color, and copy the SVG. Embed it inline in your HTML or save it as a .svg file and use it like any image.
Frequently Asked Questions
Q: How do I embed the wave in my page?
How do I embed the wave in my page? Copy the SVG and paste it inline into your HTML, or save the code as a .svg file and reference it with an <img> tag.
Q: Can I flip the wave direction?
Can I flip the wave direction? Yes — add transform="scaleY(-1)" to the SVG or swap the path's start/end so the wave curves the other way.
Q: Why use SVG instead of a PNG?
Why use SVG instead of a PNG? SVG stays crisp at any resolution, weighs a few hundred bytes, and can be recolored or animated with CSS.
Q: How do I make the wave full-width?
How do I make the wave full-width? The SVG uses preserveAspectRatio="none" and width:100%, so it stretches to any container width without distortion.
Q: Can I animate the wave?
Can I animate the wave? Yes — wrap the SVG in a container with overflow:hidden and animate its position with CSS keyframes for a rolling wave effect.
CSS Named Colors & Color Psychology
The web has 148 named colors built into CSS, from Coral to Goldenrod. Beyond the code, color psychology shapes how users feel about interfaces — warm tones energize, cool tones calm, and neutrals build trust. This palette mixes CSS classics with the psychology behind them.
Coral #FF7F50Warm and friendly — popular for CTAs in lifestyle brands
Tomato #FF6347Energetic red-orange, great for urgent accents
Goldenrod #DAA520Earthy gold associated with quality and heritage
Teal #008080Balanced blue-green — calm, trustworthy, professional
Indigo #4B0082Deep violet tied to wisdom and premium brands
Crimson #DC143CBold red for passion, alerts, and strong emphasis
SlateBlue #6A5ACDSoft purple-blue common in SaaS dashboards
ForestGreen #228B22Nature and growth — the color of eco and finance brands
HotPink #FF69B4Playful and bold, the signature of youth-oriented design
Navy #000080Authority and stability — the suit-and-tie of colors
Q: What are CSS named colors?
What are CSS named colors? CSS defines 148 named colors like Coral and Goldenrod that work in any stylesheet without hex codes. They are great for prototyping but designers usually switch to hex or HSL for precise brand colors.
Q: How does color psychology affect design?
How does color psychology affect design? Warm colors (red, orange, yellow) create energy and urgency; cool colors (blue, green, teal) create calm and trust. CTAs often use warm tones while financial and health brands prefer blues and greens.