Pixeliro Logo
Pixeliro
split-complementary

Pastel Mint to Lavender Mist

Two pastels that share the same tonal whisper — mint and lavender, both barely saturated, both within 1% lightness of each other. The 135° radial means the transition is almost imperceptible — the gradient feels less like 'two colours' and more like 'mood, drifting.' Made for products that promise rest: sleep apps, journaling tools, quiet-mode UI, evening-only experiences.

Beautiful gradient ready to use in your projects

Customize in Editor
#radial#mint#lavender#split-complementary#pastel#sleep#journal#soft

About this gradient

Two pastels that share the same tonal whisper — mint and lavender, both barely saturated, both within 1% lightness of each other. The 135° radial means the transition is almost imperceptible — the gradient feels less like 'two colours' and more like 'mood, drifting.' Made for products that promise rest: sleep apps, journaling tools, quiet-mode UI, evening-only experiences.

Colour story

#D9F2DF sits in the pale-mint zone (HSL 134°, 45% S, 90% L). #D9DDF2 is its mirror in lavender (HSL 230°, 45% S, 90% L). They share IDENTICAL lightness (90%) AND saturation (45%) — only the hue varies. This is why the gradient is so calm: the eye reads no shift in 'energy,' only in 'mood.' Split-complementary in name but harmonic in execution.

#D9F2DF
#D9DDF2

Where to use it

  • →Sleep, meditation, breathwork app backgrounds where any saturation jolt would break the calm state
  • →Journaling apps (Day One, Stoic, gratitude trackers) where the gradient is the canvas for personal writing
  • →Evening / night-mode UI where the gradient becomes the visual cue for 'wind down'
  • →Onboarding for therapy products, mental health apps, or any product with 'safe space' as a value

Design tips

  • ·Body copy: deep plum (#3A3247) or warm charcoal — pure black is too harsh, mid-grey vanishes
  • ·Avoid placing this gradient on a pure-white page surface — it gets lost. Use it full-bleed or on a tinted neutral
  • ·Pair with hand-drawn illustrations or photography with a 'warm fade' filter — the gradient deserves emotional company

CSS Code &Tailwind CSS

Copy the code below to use this gradient in your project

radial-gradient(circle, #D9F2DF 0%, #D9DDF2 100%)

Full CSS Rule

.gradient-split-complementary--d9f2df-d9ddf2--radial-135 {
  background: radial-gradient(circle, #D9F2DF 0%, #D9DDF2 100%);
}

Color Stops

#D9F2DF

0%

#D9DDF2

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, #D9F2DF 0%, #D9DDF2 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, #D9F2DF 0%, #D9DDF2 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, #D9F2DF 0%, #D9DDF2 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(217, 242, 223, 0.1) 0%, rgba(217, 221, 242, 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, #D9F2DF 0%, #D9DDF2 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

Blush Orchid to Cream Lemon

Lilac to Peach

Crimson to Jade

Bloom to Spring green

Amethyst to Crimson

Magenta to Gold

Jade to Frost

Berry to Tangerine

Berry to Tangerine

Blush to Lime

Teal to Midnight

Petal to Saffron

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?

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

Customize in Editor