Wonder waves

This is a linear color gradient built with 2 color stops for modern UI and design use. Preview how the gradient performs across text, buttons, icons, mobile screens, and website layouts. You can copy production-ready CSS, export the HEX color palette, download gradient icon variants, edit the gradient, and create matching palettes. Colors include #32b1db, #31d6c0.

linear • 15°

Back

Recommended text color: black

Edit gradient Generate color palette

Gradient type

Preview updates instantly. Export uses the closest stable match for advanced types.

Angle: 15°

Use cases

website section mobile app background banner card / badge presentation

Live Preview & Usage Examples

Icons preview (3 Variants)

Outline icons use gradient strokes, filled icons apply full gradient fills while preserving inner details, and white icons are placed on gradient tiles for strong contrast. All icon variants can be downloaded in both PNG and SVG formats for immediate use in UI, branding, and design projects.

Variant 1: Outline icons (Gradient stroke)

Home

User

Heart

Bell

Settings

Cart

Mail

Cloud

Star

Variant 2: Filled icons (Gradient fill)

Home

User

Heart

Bell

Settings

Cart

Mail

Cloud

Star

Variant 3: White icons on gradient tiles

Home

User

Heart

Bell

Settings

Cart

Mail

Cloud

Star

Exports include 3 folders: outline-stroke, filled, white-on-gradient. PNG/SVG size: 258px.

Icons simulation

Uses lucide-react for preview; downloads export clean standalone SVG/PNG assets.

Best contrast text

Headline preview (H1)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Alternate text color

Headline preview (H2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Recommendation: Dark text

Text contrast preview

This preview compares large headings and body text in both light and dark styles on the selected gradient, helping you instantly identify which text color offers the best readability and visual balance before applying it to real designs.

Website hero

A clean homepage hero section

Short supporting text goes here. Keep it readable and let the gradient do the visual work.

Website homepage mockup

This simulation demonstrates how your gradient behaves across a full website layout — including a contrast-aware header, a hero section that carries brand identity, and supporting content blocks to evaluate readability and balance before real-world use.

Mobile app mockup

A mobile app UI mockup using the selected gradient across headers, cards, icons, and CTAs. Helps validate consistency, contrast, and real-world mobile usage.

Dashboard

Welcome back

Your quick summary is ready.

ViewAction

Mobile app UI mockup

Realistic phone preview with gradient header, cards, icons, and small CTAs.

Buttons preview

Primary = strongest CTA. Secondary = softer action using the same gradient, slightly reduced intensity.

On white surface

White UI cards are common — these buttons show how the gradient behaves inside clean layouts with always-dark text for consistency.

Buttons simulation

This section helps you compare CTA strength and readability using the same gradient across Primary, Secondary, Outline, and pill-style buttons — including a real “white card” UI scenario to validate contrast before using it in production.