Skill

soft-gradient-dreamy

Name: soft-gradient-dreamy
Author: Automattic

apply premium soft gradient aesthetic

Published by Automattic Updated Jun 20

Covers Creative Frontend Visual Design Design

Description

Apply the warm, atmospheric, multi-layer shadow aesthetic used by premium SaaS sites like Hex, Antimetal, Incident, Outseta, Cohere, and Amplemarket. Warm off-white grounds, tinted shadows that harmonize with theme, multi-stop gradients at deliberate angles, inset highlights for dual-edge lighting. Use when the user wants their site to feel atmospheric, luminous, warm, editorial — NOT cold SaaS purple/blue.

SKILL.md

Soft Gradient Dreamy

Transform a page from flat cold SaaS into a warm, atmospheric, depth-rich aesthetic. Extracted from Hex, Antimetal, Incident.io, Outseta, Cohere, Amplemarket, Duna, Reducto.

When to invoke

Design feels "cold," "generic," "SaaS-template"
User asks for "dreamy," "warm," "premium," "atmospheric," "editorial"
Page background is pure #ffffff or #f9fafb
Shadows are flat 0 4px 6px rgba(0,0,0,0.1) Tailwind defaults
Gradient hero is the generic purple→blue diagonal

The 6 core rules

Rule 1: Never use pure white as page background

Use a warm or cool off-white, 2–5% shifted from #fff:

/* Warm grounds (dominant pattern) */
--bg-warm-paper:   #f5f2f0;  /* Cohere */
--bg-cream:        #f7f7f5;  /* Duna */
--bg-stone:        #f8f8f6;  /* Reducto */
--bg-soft:         #fafafa;  /* Shade, Autosend */
--bg-warm-off:     #fbfaf9;  /* Amplemarket */
--bg-cool-off:     #f8f9fc;  /* Antimetal light */
--bg-opal:         #FBF9F9;  /* Hex */

/* Dark theme → go WARM, not black */
--bg-warm-dark:    #100d0a;  /* Antimetal dark */
--bg-deep-plum:    #1b0624;  /* Duna dark sections */
--bg-obsidian:     #14141C;  /* Hex dark */
--bg-alarmalade:   #f8f5ef;  /* Incident warm surface */

Anti-pattern: background: #ffffff or background: #f9fafb (cold gray).

Rule 2: Shadows must be tinted — never neutral black

Every case-study site tints shadows to match the theme's dominant hue. Copy these patterns directly:

/* Aubergine-tinted (Outseta) — for warm purple-leaning designs */
--shadow-aubergine: 0 0 0 1px hsl(293deg 100% 7% / 0.11),
                    0 2px 2px 0 hsl(293deg 100% 7% / 0.05);

/* Rose-tinted (Hex) — for warm pink/stone designs */
--shadow-rose: 0 0 24px 0px rgba(245,192,192,0.23) inset,
               6px 27px 10px 0px rgba(100,63,63,0.01),
               4px 4px 10px 0px rgba(100,63,63,0.04),
               2px 13px 8px 0px rgba(100,63,63,0.06),
               1px 6px 6px 0px rgba(100,63,63,0.06),
               0px 1px 3px 0px rgba(100,63,63,0.18);

/* Plum-tinted (Duna) — Figma-exported sub-pixel precision */
--shadow-plum: 0 0.6021873px 1.8065619px -0.6666667px rgba(45,32,50,0.08),
               0 2.288533px 6.8656px -1.3333333px rgba(45,32,50,0.09),
               0 10px 30px -2px rgba(45,32,50,0.12);

/* Cool blue-gray (Cal) — for neutral, "calm software" */
--shadow-cal: 0px 1px 5px -4px rgba(19,19,22,0.7),
              0px 0px 0px 1px rgba(34,42,53,0.08),
              0px 4px 8px 0px rgba(34,42,53,0.05);

/* Theme-mixed (Antimetal) — shadow inherits the hero color via color-mix */
--shadow-themed: 0 48px 56px color-mix(in srgb, var(--color-hero) 8%, transparent),
                 0 24px 32px color-mix(in srgb, var(--color-hero) 12%, transparent),
                 inset 0 .5px .5px color-mix(in srgb, var(--color-hero) 24%, transparent),
                 inset 0 -.5px .5px color-mix(in srgb, var(--color-hero) 24%, transparent),
                 inset 0 0 0 1px color-mix(in srgb, var(--color-hero) 6%, transparent);

Anti-pattern: box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) (Tailwind default).

Rule 3: Stack 3–8 shadow layers for real atmosphere

Premium sites never ship a single-layer shadow. The formula:

Layer 1: 1px ring (hairline outline)    → 0 0 0 1px rgba(...tint..., 0.06-0.11)
Layer 2: Short contact (close lift)     → 0 1px 2px rgba(...tint..., 0.05)
Layer 3: Medium ambient (mid distance)  → 0 4-8px 16-24px rgba(...tint..., 0.05-0.08)
Layer 4: Long ambient (far glow)        → 0 24-56px 56-88px rgba(...tint..., 0.05-0.20)
Layer 5: Top inset highlight            → inset 0 .5px .5px rgba(255,255,255,0.24)
Layer 6: Bottom inset highlight         → inset 0 -.5px .5px rgba(255,255,255,0.24)

Antimetal's 8-layer signature (copy verbatim):

box-shadow:
  0 56px 88px #0a08061a,
  0 16px 40px #0a08060d,
  0 4px 12px #0a080605,
  0 0 0 1px #0a08060a,
  inset 0 4px 12px -6px #e0f6ff0f,
  inset 0 .5px .5px #e0f6ff3d,
  inset 0 0 0 1px #e0f6ff0f,
  inset 0 -.5px .5px #e0f6ff3d;

Hex's rose floating-card (exaggerated 103px blur for maximum atmosphere):

box-shadow:
  0 0 0 1px rgba(49,38,59,0.22),
  0 103px 103px 0 rgba(49,38,59,0.09),
  0 26px 57px 0 rgba(49,38,59,0.10);

Rule 4: Gradients are never the default 135° purple→blue

When you use a gradient, be intentional about:

Angle (specific degree, not 45/135)
Palette (warm or intentional 3+ stop)
Usage (ambient wash, text clip, or signature art — rarely as a button background)

Incident.io's "Alarmalade" — 3-stop 70° brand gradient:

background: linear-gradient(70deg, #f25533 31%, #f1cd98 82%, #f8f5ef 100%);

Cohere's signature — 78° coral-to-blue, a full warm-to-cool journey:

background: linear-gradient(78deg, #ff7759, #7670c5 60%, #4c6ee6 90%);

Angellist's painterly plate — 9-stop gallery art (used inside 200–300px radius rectangles):

background: linear-gradient(195.85deg,
  #6258ff -121.25%, #e06ab2 -69.08%, #fb8569 -36.55%,
  #ffb1b1 12.07%, #cdcbff 59.26%, #7e6f4a 126.83%,
  #32607f 172.94%, #fde8b5 277.03%);

Outseta's warm diagonal — peach/cream/yellow wash behind hero:

background: linear-gradient(145deg, hsl(47deg 100% 87%), #2900290d 30%);

Antimetal's subtle double-wash — stacked vertical ambient at 4% opacity:

background:
  linear-gradient(0deg, #e0f6ff0a 0%, #e0f6ff0a 100%),
  linear-gradient(180deg, #e0f6ff0a 0%, #0000 25%, #0000 90%, #e0f6ff0a 100%),
  var(--bg-page);

Amplemarket's radial mouse-tracking — WebGL-shader gradient painted on hero text:

background: radial-gradient(
  80.17% 109.2% at var(--gradient-posX, 54.31%) var(--gradient-posY, 61.46%),
  var(--violet) 0%,
  var(--peach) var(--gradient-stop1, 49.83%),
  var(--phoenix-orange) var(--gradient-stop2, 99.99%));

Anti-pattern: linear-gradient(135deg, #667eea 0%, #764ba2 100%) (every AI site).

Rule 5: Inset highlights simulate dual-edge lighting on cards

Cards feel lit from within when you add inset highlights on TOP and BOTTOM edges:

box-shadow:
  /* ambient drop */
  0 24px 32px 0 rgba(10,8,5,0.12),
  /* 1px ring */
  inset 0 0 0 1px rgba(255,255,255,0.06),
  /* top highlight — simulates light hitting top edge */
  inset 0 .5px .5px rgba(255,255,255,0.24),
  /* bottom highlight — simulates rim light on bottom edge */
  inset 0 -.5px .5px rgba(255,255,255,0.24);

This makes the card appear "glassy" rather than "floating." Antimetal's signature.

Rule 6: Buttons get ambient stack + inset highlight

Buttons are the most imitated element. Make them physical:

Amplemarket's keycap stack (4 drops + 2 insets, copy verbatim):

box-shadow:
  0 6px 2px #11111103,
  0 3px 2px #1111110D,
  0 1px 1px #11111117,
  0 0 1px #1111111f,
  inset 0 6px 12px #ffffff33,
  inset 0 1px 1px #fff3;

/* Active state inverts the inset — feels truly pressed */
box-shadow:
  0 6px 2px #11111103,
  0 3px 2px #1111110D,
  0 1px 1px #11111117,
  0 0 1px #1111111f,
  inset 0 6px 12px #11111133,
  inset 0 1px 1px #111111f3;

Cal's highlight lip (1px white inset on top edge):

background: #141414;
box-shadow:
  0px 1px 5px -4px rgba(19,19,22,0.7),
  0px 0px 0px 1px rgba(34,42,53,0.08),
  0px 4px 8px 0px rgba(34,42,53,0.05),
  inset 0px 2px 0px 0px rgb(255,255,255);  /* ← top edge highlight */

Application workflow

Apply these in order when retrofitting a page:

Swap the background — page from #fff → warm off-white (#fafafa/#f5f2f0/#f7f7f5)
Pick a shadow tint — what hue dominates your theme? Warm purple → aubergine. Warm pink → rose. Warm neutral → plum. Cool neutral → blue-gray. Commit to one tinted shadow system across the whole page.
Replace every shadow-sm/md/lg/xl with a stacked multi-layer shadow using that tint
Add inset highlights to cards (top + bottom 0.5px at ~24% tint)
Redesign the gradient hero with a deliberate multi-stop warm palette at a non-default angle
Upgrade buttons to ambient-stack + inset-highlight shadows; keep them flat color (no gradient button backgrounds)

Ready-to-use CSS blocks

Dreamy light theme starter

:root {
  /* Warm paper ground */
  --bg-page: #f7f7f5;
  --bg-card: #ffffff;
  --bg-sunken: #f1ebe2;

  /* Warm plum-tinted text */
  --text-primary: #222221;
  --text-secondary: #4d4846;
  --text-muted: #898683;

  /* Theme-matched shadow tint */
  --shadow-tint: 45, 32, 50;  /* warm plum */

  /* Hairline border */
  --border-hairline: rgba(0, 0, 0, 0.06);

  /* Multi-layer card shadow */
  --shadow-card:
    0 0.6021873px 1.8065619px -0.667px rgba(var(--shadow-tint), 0.08),
    0 2.288533px 6.8656px -1.333px rgba(var(--shadow-tint), 0.09),
    0 10px 30px -2px rgba(var(--shadow-tint), 0.12);

  /* Floating card (deeper) */
  --shadow-float:
    0 0 0 1px rgba(var(--shadow-tint), 0.06),
    0 4px 12px rgba(var(--shadow-tint), 0.04),
    0 16px 40px rgba(var(--shadow-tint), 0.06),
    0 56px 88px rgba(var(--shadow-tint), 0.08),
    inset 0 .5px .5px rgba(255,255,255,0.24),
    inset 0 -.5px .5px rgba(255,255,255,0.24);
}

body { background: var(--bg-page); color: var(--text-primary); }
.card { background: var(--bg-card); box-shadow: var(--shadow-card); border-radius: 16px; }
.card--float { box-shadow: var(--shadow-float); }

Dreamy dark theme (Antimetal-inspired)

.theme-dark {
  --bg-page: #100d0a;       /* warm near-black */
  --bg-card: #17130f;
  --color-hero: #fff3d7;    /* WARM CREAM — not cool white */
  --text-primary: #fff3d7;
  --text-secondary: #fff3d7b8;

  --shadow-card:
    0 0 0 1px color-mix(in srgb, var(--color-hero) 4%, transparent),
    0 6px 16px rgba(0,0,0,0.25),
    inset 0 .5px 1px color-mix(in srgb, var(--color-hero) 8%, transparent),
    inset 0 1px 2px color-mix(in srgb, var(--color-hero) 6%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--color-hero) 6%, transparent);
}

Site references (what each pattern is extracted from)

Pattern	Source sites
Warm off-white background	Duna, Reducto, Cohere, Amplemarket, Hex
Tinted shadow system	Outseta (aubergine), Hex (rose), Duna (plum), Cal (blue-gray)
8-layer stacked shadow	Antimetal, Hex, Outseta
Dual inset highlights	Antimetal, Amplemarket, Cal
Multi-stop warm gradient	Incident (70° alarmalade), Cohere (78° coral→blue), Angellist (9-stop)
`color-mix` theme-tied shadows	Antimetal
Radial mouse-tracking gradient	Amplemarket (WebGL), Shade (cursor spotlight)
Sub-pixel Figma-exported shadows	Duna

What this skill does NOT do

Doesn't dictate color palette — pick your own, then tint shadows to match
Doesn't apply to utility/admin UI (dashboards) — those usually want less atmosphere
Not for high-contrast accessibility-first interfaces
Not for motion/micro-interactions (see motion-and-micro-interactions skill)

More skills from the design-polish-suite repository

View all 6 skills

SkillTagsUpdated

More from Automattic

View publisher

SkillTagsUpdated