Breathing gradient
Three colors turn inside a huge blurred conic gradient while a soft vignette pulses in and out.
Settings
Code
<div class="pt-breathe"><i></i><b></b></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Backgrounds
Where to use it
This one suits calm places: the welcome screen of a meditation app, the website of a yoga studio or the waiting room before a live stream starts. The colors rotate very slowly and the edges swell and relax like breathing. Think of it as an animated conic gradient background that never really draws attention to itself.
Speed is the setting to watch here. Around the default it feels relaxing; push it too far and the pulse gets anxious, which is the opposite of the point. It sits best behind a single short line of text and one button.