Choosing Between Gradients, Mesh, and Liquid Glass
A practical guide to picking the right surface treatment for a hero, card, or dashboard. When to use each effect, what each one does well, and which mistakes make a page feel generic or hard to read.
Most teams do not need more visual effects. They need a clearer way to choose the right effect for the job. Gradients, mesh, and Liquid Glass solve different problems, and the best page usually uses only one of them as the dominant surface treatment.
When to use a gradient
Use a gradient when the surface needs direction, energy, or a subtle sense of movement. It works well behind a hero, a section break, or a single feature card that needs a bit more life.
- Best for large areas with short copy on top.
- Good when you need a brand color transition without extra texture.
- Works well when the background should support the content, not compete with it.
When mesh does more work
Mesh gradients are better when you want atmosphere. They feel softer and more ambient than a linear gradient, which makes them useful for landing pages and background treatments that need more depth.
If the page already has a lot of structure, mesh can be too much. Use it when the background is meant to feel like a scene, not a stripe.
When Liquid Glass is the better choice
Liquid Glass is a surface treatment, not a backdrop. It works when a card or panel needs to sit on top of a visually rich background and still feel clear and intentional.
- Keep the background busy enough for blur to matter.
- Keep the copy short and high contrast.
- Use the border and shadow to maintain separation.
A simple rule of thumb
If the surface needs direction, use a gradient. If it needs atmosphere, use mesh. If it needs a readable glass-like layer on top of an existing scene, use Liquid Glass.