diff --git a/components/more-less/README.md b/components/more-less/README.md
index 01e71a82b7..320056f342 100644
--- a/components/more-less/README.md
+++ b/components/more-less/README.md
@@ -20,7 +20,6 @@ The `d2l-more-less` element can be used to minimize the display of long content,
 
 | Property | Type | Description |
 |---|---|---|
-| `blur-color` | String | Gradient HEX formatted color of the blurring effect (defaults to white). |
 | `expanded` | Boolean | Specifies the expanded/collapsed state of the content |
 | `h-align` | String | A value of `text` aligns the leading edge of text |
 | `height` | String, default: `'4em'` | Maximum height of the content when in "less" mode. The `d2l-more-less` element itself will take up additional vertical space for the fading effect as well as the more/less button itself. |
diff --git a/components/more-less/demo/more-less.html b/components/more-less/demo/more-less.html
index 900345be09..e48dfe9f76 100644
--- a/components/more-less/demo/more-less.html
+++ b/components/more-less/demo/more-less.html
@@ -45,18 +45,6 @@ <h2>More-less expanded</h2>
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>More-less with custom blur color</h2>
-
-			<d2l-demo-snippet>
-				<template>
-					<div style="background-color: #ff0000; padding: 10px;">
-						<d2l-more-less blur-color="#ff0000">
-							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="">Vestibulum</a> elementum venenatis arcu sit amet varius. Maecenas posuere magna arcu, quis maximus odio fringilla ac. Integer ligula lorem, faucibus sit amet cursus vel, pellentesque a justo. Aliquam urna metus, molestie at tempor eget, vestibulum a purus. Donec aliquet rutrum mi. Duis ornare congue tempor. Nullam sed massa fermentum, tincidunt leo eu, vestibulum orci. Sed ultrices est in lacus venenatis, posuere suscipit arcu scelerisque. In aliquam ipsum rhoncus, lobortis ligula ut, molestie orci. Proin scelerisque tempor posuere. Phasellus consequat, lorem quis hendrerit tempor, sem lectus sagittis nunc, in tristique dui arcu non arcu. Nunc aliquam nisi et sapien commodo lacinia. <a href="">Quisque</a> iaculis orci vel odio varius porta. Fusce tincidunt dolor enim, vitae sollicitudin purus suscipit eu.</p>
-						</d2l-more-less>
-					</div>
-				</template>
-			</d2l-demo-snippet>
-
 		</d2l-demo-page>
 
 		<script>
diff --git a/components/more-less/more-less.js b/components/more-less/more-less.js
index 9864fb045d..85e31722b2 100644
--- a/components/more-less/more-less.js
+++ b/components/more-less/more-less.js
@@ -20,12 +20,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 
 	static get properties() {
 		return {
-			/**
-			 * The gradient color of the blurring effect
-			 * @type {string}
-			 */
-			blurColor: { type: String, attribute: 'blur-color' },
-
 			/**
 			 * Indicates whether element is in "more" state
 			 * @type {boolean}
@@ -49,7 +43,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 			 * @type {boolean}
 			 */
 			inactive: { type: Boolean, reflect: true },
-			__blurBackground: { state: true },
 			__maxHeight: { state: true },
 			__transitionAdded: { state: true }
 		};
@@ -67,16 +60,9 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 			.d2l-more-less-transition {
 				transition: max-height ${transitionDur}ms cubic-bezier(0, 0.7, 0.5, 1);
 			}
-			.d2l-more-less-blur {
-				display: none;
-			}
-			:host(:not([expanded]):not([inactive])) .d2l-more-less-blur {
-				bottom: 1em;
-				content: "";
-				display: block;
-				height: 1em;
-				margin-bottom: -0.75em;
-				position: relative;
+			:host(:not([expanded]):not([inactive])) .d2l-more-less-content {
+				-webkit-mask-image: linear-gradient(to top, transparent, #000000 1em);
+				mask-image: linear-gradient(to top, transparent, #000000 1em);
 			}
 			:host([inactive]) .d2l-more-less-toggle {
 				display: none;
@@ -96,7 +82,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 		this.height = '4em';
 		this.inactive = false;
 
-		this.__blurBackground = 'linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%)';
 		this.__transitionAdded = false;
 		this.__maxHeight = this.height;
 
@@ -145,7 +130,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 
 		this.__content = this.shadowRoot.querySelector('.d2l-more-less-content');
 		this.__contentSlot = this.shadowRoot.querySelector('.d2l-more-less-content slot');
-		this.__init_setupBlurColour();
 		this.__init_setupListeners();
 
 		this.__bound_transitionEvents = this.__transitionEvents.bind(this);
@@ -164,7 +148,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 			<div id="${this.__contentId}" class=${classMap(contentClasses)} style=${styleMap({ maxHeight: `${this.__maxHeight}` })}>
 				<slot></slot>
 			</div>
-			<div class="d2l-more-less-blur" style=${styleMap({ background: `${this.__blurBackground}` })}></div>
 			<d2l-button-subtle
 				class="d2l-more-less-toggle"
 				icon="${this.__computeIcon()}"
@@ -300,33 +283,6 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 		});
 	}
 
-	__init_setupBlurColour() {
-		if (!this.blurColor
-			|| this.blurColor[0] !== '#'
-			|| (this.blurColor.length !== 4 && this.blurColor.length !== 7)
-		) {
-			return;
-		}
-
-		let hex = this.blurColor.substring(1);
-
-		// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-		if (hex.length === 3) {
-			const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-			hex = hex.replace(shorthandRegex, (m, r, g, b) => {
-				return r + r + g + g + b + b;
-			});
-		}
-
-		const bigint = parseInt(hex, 16);
-		const r = (bigint >> 16) & 255;
-		const g = (bigint >> 8) & 255;
-		const b = bigint & 255;
-
-		this.__blurBackground =
-			`linear-gradient(rgba(${r}, ${g}, ${b}, 0) 0%, rgb(${r}, ${g}, ${b}) 100%)`;
-	}
-
 	__init_setupListeners() {
 		this.__startObserving();
 		if (this.__contentSlot) {
diff --git a/components/more-less/test/golden/more-less/chromium/auto-collapses-on-focus-out.png b/components/more-less/test/golden/more-less/chromium/auto-collapses-on-focus-out.png
index 19b1d682be..9a21695c2b 100644
Binary files a/components/more-less/test/golden/more-less/chromium/auto-collapses-on-focus-out.png and b/components/more-less/test/golden/more-less/chromium/auto-collapses-on-focus-out.png differ
diff --git a/components/more-less/test/golden/more-less/chromium/collapsed.png b/components/more-less/test/golden/more-less/chromium/collapsed.png
index 5d2d81513e..7fd5eb3821 100644
Binary files a/components/more-less/test/golden/more-less/chromium/collapsed.png and b/components/more-less/test/golden/more-less/chromium/collapsed.png differ
diff --git a/components/more-less/test/golden/more-less/chromium/collapses-on-click.png b/components/more-less/test/golden/more-less/chromium/collapses-on-click.png
index 1a5fe15f40..e9a75e5a41 100644
Binary files a/components/more-less/test/golden/more-less/chromium/collapses-on-click.png and b/components/more-less/test/golden/more-less/chromium/collapses-on-click.png differ
diff --git a/components/more-less/test/golden/more-less/chromium/does-not-auto-expand-on-focus-in-when-not-scrolled.png b/components/more-less/test/golden/more-less/chromium/does-not-auto-expand-on-focus-in-when-not-scrolled.png
index 19b1d682be..9a21695c2b 100644
Binary files a/components/more-less/test/golden/more-less/chromium/does-not-auto-expand-on-focus-in-when-not-scrolled.png and b/components/more-less/test/golden/more-less/chromium/does-not-auto-expand-on-focus-in-when-not-scrolled.png differ
diff --git a/components/more-less/test/golden/more-less/chromium/does-not-grow-with-content-when-collapsed.png b/components/more-less/test/golden/more-less/chromium/does-not-grow-with-content-when-collapsed.png
index 5d2d81513e..7fd5eb3821 100644
Binary files a/components/more-less/test/golden/more-less/chromium/does-not-grow-with-content-when-collapsed.png and b/components/more-less/test/golden/more-less/chromium/does-not-grow-with-content-when-collapsed.png differ
diff --git a/components/more-less/test/golden/more-less/chromium/with-custom-blur.png b/components/more-less/test/golden/more-less/chromium/with-custom-blur.png
index c2aab00790..2b9fedbbb8 100644
Binary files a/components/more-less/test/golden/more-less/chromium/with-custom-blur.png and b/components/more-less/test/golden/more-less/chromium/with-custom-blur.png differ
diff --git a/components/more-less/test/golden/more-less/chromium/with-custom-height.png b/components/more-less/test/golden/more-less/chromium/with-custom-height.png
index 7192165a79..319c92b84a 100644
Binary files a/components/more-less/test/golden/more-less/chromium/with-custom-height.png and b/components/more-less/test/golden/more-less/chromium/with-custom-height.png differ
diff --git a/components/more-less/test/more-less.vdiff.js b/components/more-less/test/more-less.vdiff.js
index 3c76d76f3d..99d99a15a5 100644
--- a/components/more-less/test/more-less.vdiff.js
+++ b/components/more-less/test/more-less.vdiff.js
@@ -84,7 +84,7 @@ describe('more-less', () => {
 	it('with custom blur', async() => {
 		const elem = await fixture(html`
 			<div style="background-color: #ff0000; padding: 10px;">
-				<d2l-more-less blur-color="#ff0000">${content()}</d2l-more-less>
+				<d2l-more-less>${content()}</d2l-more-less>
 			</div>
 		`, { viewport });
 		await expect(elem).to.be.golden();