Magic
Gradient
Explore
Login
SVG Wave
Generator
Let's make some waves! Customize gradients, shapes, and frequency, then export your perfect SVG wave for any web project.
Wave Settings
Wave Colors
−
Remove last color from the gradient #d9157c
Edit color: #3323ca
Edit color: #d9157c
+
Add color to the gradient
Gradient Direction
Gradient direction - To top left
Gradient direction - To top
Gradient direction - To top right
Gradient direction - To left
Gradient direction - To right
Gradient direction - To bottom left
Gradient direction - To bottom
Gradient direction - To bottom right
Wave Direction
Set wave direction: top
Set wave direction: down
Wave Shape
Set wave shape to: cubic
Set wave shape to: roundy
Set wave shape to: pointy
Wave Frequency
Set wave frequency, higher value gives more waves
Regenerate Pattern
SVG Wave
Download SVG
Discover more gradients for your svg wave
Sunset Ember
Color codes used in sunset ember gradient: #eb6060, #ff8a66, #ffd54d
Sunset Ember gradient is liked by 0 people.
Add sunset ember gradient to your favorites.
0
Sunlit Dawn
Color codes used in sunlit dawn gradient: #fdefd3, #ffd89e, #f9a571
Sunlit Dawn gradient is liked by 0 people.
Add sunlit dawn gradient to your favorites.
0
Holiday Sunshine
Color codes used in holiday sunshine gradient: #ffd900, #ff6347, #ffa07a
Holiday Sunshine gradient is liked by 0 people.
Add holiday sunshine gradient to your favorites.
0
Festive Christmas Glow
Color codes used in festive christmas glow gradient: #a72020, #d15400, #f1c40e
Festive Christmas Glow gradient is liked by 0 people.
Add festive christmas glow gradient to your favorites.
0
Casper Glow
Color codes used in casper glow gradient: #e0f7fa, #b1eaf2, #80deea
Casper Glow gradient is liked by 0 people.
Add casper glow gradient to your favorites.
0
Sky Dawn
Color codes used in sky dawn gradient: #71a7d0, #a9c3d1, #d0d7d0
Sky Dawn gradient is liked by 0 people.
Add sky dawn gradient to your favorites.
0
Azure Sky
Color codes used in azure sky gradient: #7479d2, #91a1e8, #a8b7ff
Azure Sky gradient is liked by 0 people.
Add azure sky gradient to your favorites.
0
Sky Breeze
Color codes used in sky breeze gradient: #71a7d0, #a9c8d1, #d0e0f0
Sky Breeze gradient is liked by 0 people.
Add sky breeze gradient to your favorites.
0
Explore more gradients