Font Blend

Rose Quartz Bloom

radial

A radial rose bloom from blush to deep rose.

softfeminineelegant

Rose Quartz Bloom as a Framed Flourish

Rose Quartz Bloom is a radial gradient that spreads blush pink at the center into a deep rose at the edges. It behaves the way a soft spotlight does, which makes it ideal for portrait photography cards, beauty product shots, event invitations, and any layout that wants warmth concentrated in one spot. The blush center keeps the middle of the gradient delicate while the deeper rim adds weight where the gradient meets the page.

Deep maroon or white text both work in the central zone, but the readable area shrinks quickly near the edges where the color darkens. Because it is radial, it is easy to crop into circles and buttons; a circular avatar or badge with this gradient needs no extra theming. It also layers well underneath a subtle grain or noise texture if the design needs a tactile finish.

Because the radial bloom ends in deep rose, it pairs with a page that stays light: the gradient can sit behind a portrait card or a header while white surfaces carry the rest of the layout. The center is the light blush, so dark maroon text works there, and as the ring deepens white text takes over. For avatars and badges the gradient needs no companion color, but keep the initials centered so they sit in the brightest part of the bloom. The two stops are simple enough to copy from the token block and reuse in a spinner by animating the rotation.

Color stops
Each stop in the gradient, with hex value and position.

position 0%

position 100%

CSS code
Copy and paste into your stylesheet.
gradient.css
background: radial-gradient(circle, #FBCFE8 0%, #BE185D 100%);
tokens.css
:root {
  --gradient-rose-quartz-bloom: radial-gradient(circle, #FBCFE8 0%, #BE185D 100%);
}

.gradient-rose-quartz-bloom {
  background-image: var(--gradient-rose-quartz-bloom);
}
rose-quartz-bloom.svg
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600">
  <defs>
    <radialGradient id="g" cx="50%" cy="50%" r="65%">
      <stop offset="0.000" stop-color="#FBCFE8" />
      <stop offset="1.000" stop-color="#BE185D" />
    </radialGradient>
  </defs>
  <rect width="1200" height="600" fill="url(#g)" />
</svg>

Related Gradients