Pixeliro Logo
Pixeliro
muted

Mineral Mint to Lavender Mist

A gradient at the edge of perception — mineral mint and lavender mist barely declaring themselves. The 315° anchor pulls mint to the upper-left and lets lavender drift into the lower-right corners. Both ends share matching low saturation and high lightness, which is what gives the gradient its 'quiet voice.' Made for journaling apps, meditation tools, slow-tech products where the colour story is 'we don't shout.'

Beautiful gradient ready to use in your projects

Customize in Editor
#radial#mint#lavender#muted#quiet#journal#meditation

About this gradient

A gradient at the edge of perception — mineral mint and lavender mist barely declaring themselves. The 315° anchor pulls mint to the upper-left and lets lavender drift into the lower-right corners. Both ends share matching low saturation and high lightness, which is what gives the gradient its 'quiet voice.' Made for journaling apps, meditation tools, slow-tech products where the colour story is 'we don't shout.'

Colour story

#D5E6E2 is mineral mint (HSL 168°, 24% S, 87% L) — green-grey at the edge of neutral. #C8C1DA is lavender mist (HSL 256°, 23% S, 81% L). Matched ~24% saturation is the gradient's signature whisper; the 88° hue gap is just enough to feel like a colour shift rather than uneven lighting. Mid-radial reads as soft cream-grey.

#D5E6E2
#C8C1DA

Where to use it

  • →Journaling apps (Day One, Stoic, gratitude trackers) — the gradient is the canvas, not the content
  • →Meditation, breathwork, and sleep app backgrounds where any saturation jolt would break the calm
  • →Slow-tech product marketing — longevity tracking, supplement brands, breathwork tools
  • →Therapy app onboarding, mental health products, or 'safe space' branded experiences

Design tips

  • ·Body text: deep plum (#3A3247) or warm charcoal — pure black is too sharp
  • ·Avoid pairing with pure-white surfaces — the gradient gets lost. Use full-bleed or against tinted neutrals
  • ·Add hand-drawn illustration or warm photography — perfectly digital aesthetics fight the gradient's softness

CSS Code &Tailwind CSS

Copy the code below to use this gradient in your project

radial-gradient(circle, #D5E6E2 0%, #C8C1DA 100%)

Full CSS Rule

.gradient-muted--d5e6e2-c8c1da--radial-315 {
  background: radial-gradient(circle, #D5E6E2 0%, #C8C1DA 100%);
}

Color Stops

#D5E6E2

0%

#C8C1DA

100%

CSS Ready

Copy-paste ready CSS code with cross-browser compatibility

Tailwind Ready

Use directly with Tailwind CSS utility classes

Fully Customizable

Open in editor to adjust colors, angle, and stops

Responsive

Looks perfect on all screen sizes and devices

Perfect For

Hero Sections

Create eye-catching hero backgrounds for landing pages

Buttons & CTAs

Make buttons stand out with gradient backgrounds

Cards & Overlays

Add depth to cards with subtle gradient overlays

Text Effects

Apply gradient to text for modern typography

Common Uses of Gradients in UI and Graphic Design

Learn how to apply CSS gradients in real-world design scenarios

UI Background

Hero sections, landing pages, and app backgrounds

Hero Background

Perfect for hero sections, landing pages, and full-screen app backgrounds. Creates visual depth and modern aesthetic.

CSS
background: radial-gradient(circle, #D5E6E2 0%, #C8C1DA 100%);

Button Gradients

Call-to-action buttons with eye-catching gradients

Gradient buttons attract attention and improve click-through rates. Ideal for CTAs, sign-up buttons, and primary actions.

CSS
background: radial-gradient(circle, #D5E6E2 0%, #C8C1DA 100%);

Text Gradients

Eye-catching gradient text for headlines

Gradient Text

Gradient text makes headlines pop. Works great for hero titles, feature names, and brand statements.

CSS
background-image: radial-gradient(circle, #D5E6E2 0%, #C8C1DA 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;

Card / Surface Gradients

Subtle gradients for cards and UI surfaces

Feature Card

Subtle gradient background

Subtle gradients add depth to cards without overwhelming. Perfect for feature cards, testimonials, and pricing tables.

CSS
background: radial-gradient(circle, rgba(213, 230, 226, 0.1) 0%, rgba(200, 193, 218, 0.1) 100%);

Border Gradients

Gradient borders for modern UI elements

Gradient Border Card

Stand out with colorful borders

Gradient borders make elements stand out. Great for input fields, cards, and featured content sections.

CSS
.gradient-border {
  background: radial-gradient(circle, #D5E6E2 0%, #C8C1DA 100%);
  padding: 2px;
  border-radius: 12px;
}
.gradient-border > div {
  background: var(--bg-surface);
  border-radius: 10px;
}

Related Tools

Generate Palette from Gradient →Check Gradient Contrast →Explore Colors →
Generated

Related Gradient Variations

Explore harmonious variations based on your current gradient

Sage to Midnight

Sky to Plum

Indigo blue to Magenta

Linen to Pearl

Tangerine to Sage

Linen to Pearl

Spruce to Periwinkle

Spruce to Periwinkle

Lilac to Tomato

Kelp to Twilight

Garnet to Emerald

Tomato to Moss

Frequently Asked Questions

Everything you need to know

How do I use this gradient in my project?

Simply copy the CSS or Tailwind code and paste it into your stylesheet. The gradient is ready to use with no additional setup required.

Can I customize this gradient?

Yes! Click "Customize in Editor" to open the gradient in our visual editor where you can adjust colors, angle, and color stops.

Is this gradient free to use?

Yes, all gradients on Pixeliro are free to use in personal and commercial projects. No attribution required.

Does this work with Tailwind CSS?

Yes! We provide ready-to-use Tailwind CSS classes. You can also add custom colors to your tailwind.config.js for full customization.

Ready to Get Started?

Mineral Mint to Lavender Mist Gradient - Free, no signup required

Customize in Editor