---
name: css-svg-wave-generator
description: "Create customized SVG dividing waves for beautiful web layouts. Use when the user wants help with CSS SVG Wave Generator. Related topics: design, frontend, css."
---

# CSS SVG Wave Generator

Create customized SVG dividing waves for beautiful web layouts.

## How to use this skill

1. Ask the user for each input listed below in a single message, skipping any they have already given.
2. Where options are listed, offer them, but accept other answers too.
3. Fill the answers into the prompt template, then follow the completed prompt to produce the result.

## Inputs

- **Wave Type** (choose one: Smooth Wave, Spiky Peak, Curved Arch, Steps)
- **Colors** (free text, e.g. "")
- **Height/Amplitude** (choose one: min, 500)

## Prompt template

## Introduction
Generate raw SVG code for responsive page divider waves.

## Wave settings
- Wave Type: {{Wave Type}}
- Colors: {{Colors}}
- Height/Amplitude: {{Height/Amplitude}}

---

Source: [CSS SVG Wave Generator on PromptBuild](https://promptbuild.io/prompt/217xBDzI9ZGO8G3NHAnI/css-svg-wave-generator)