Plus UI Design · Practical guides

Create a gradient hero with readable text

Use a simple two-color surface as a starting point, then check the content across the whole background.

Keep the first version simple

Choose a dark blue-to-purple gradient and light text for the initial composition. Use enough padding to separate the copy from decorative edges. The example below demonstrates the layout and ordinary CSS fallback; adjust its colors to your brand.

Check every text position

Do not measure contrast only at one corner. A gradient can put the same text over different colors at different widths. If the background becomes too bright behind copy, move the transition, darken the surface or place the text on a more uniform panel.

Test the exported classes

Paste the Tailwind v4 output into your application and inspect the built page. A preview is not proof that every class is included by the project’s build. Check hover and focus states for any controls placed on the surface.

Example to adapt

<section style="background:linear-gradient(135deg,#172554,#581c87);color:white;padding:3rem 1.5rem">
  <h1>Build something useful</h1>
  <p>A short description that stays readable across the surface.</p>
</section>