Mesh Gradients are one of the most visually captivating modern design trends, often used in UI/UX design to create vibrant, fluid, and organic color backgrounds. Unlike traditional linear or radial gradients, mesh gradients allow multiple colors to blend across different control points, giving a smooth, natural, and abstract look.
This repository demonstrates Mesh Gradients in Jetpack Compose, exploring their use with custom shapes, custom UI components, and Canvas API.
- ✅ Mesh Gradients implementation in Jetpack Compose.
- ✅ Using @sinasamaki’s Mesh Gradient Modifier (article, video).
- ✅ Demonstrated gradients on custom UI components (Cards, Buttons, etc.).
- ✅ Built responsive custom shapes with the Canvas API.
- ✅ Added a helper class for CouponShape (with arc cutouts)
mesh_gradients.mp4
- 🔘 Button Mesh Gradient →
practice/Sample6.kt - 🃏 Cards Mesh Gradient →
CardsScreen.kt - ✂ CouponShape Helper Class →
customShapes/CouponShape.kt
The CouponShape is a reusable shape with arc cutouts on the horizontal sides. It’s fully responsive, customizable, and comes with two public constructors:
- By radius height → Takes radius height and generates arcs automatically.
- By arc count & space height → Takes number of arcs + space height, and auto-calculates arcs.
📌 Code: customShapes/CouponShape.kt
While this project only uses @sinasamaki’s modifier, there is also a 3rd-party Mesh Gradient library for Compose:
- 🌐 Coolors Gradient Generator
- 🌐 UI Gradients
- 🌐 Mesh Gradient Creator
- 🌐 Coolors Image Palette Picker
- 🌐 MyColorSpace Gradient Generator
If you find this repository helpful, consider giving it a star ⭐ — it motivates me to create and share more awesome Compose experiments!