kirkegaard/scrollable.html

## scrollable.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <h1>Games</h1>
      <div class="scrollable">
        <div class="scrollable--inner">
          <div class="scrollable--item">This is an item</div>
          <div class="scrollable--item">This is an item</div>
          <div class="scrollable--item">This is an item</div>
          <div class="scrollable--item">This is an item</div>
          <div class="scrollable--item">This is an item</div>
          <div class="scrollable--item">This is an item</div>
          <div class="scrollable--item">This is an item</div>
          <div class="scrollable--item">This is an item</div>
          <div class="scrollable--item">This is an item</div>
          <div class="scrollable--item">This is an item</div>
        </div>
      </div>
    </div>
  </body>
</html>

## styles.css
:root {
  --scrollable-fade-out: 100px;
}

* {
  margin: 0;
  padding: 0;
}

body,
html {
  min-height: 100%;
  overflow-x: hidden;
}

body {
  padding: 2rem 0;
  color: #fff;
  background: rgb(34, 193, 195);
  background: linear-gradient(
    0deg,
    rgba(253, 187, 45, 1) 0%,
    rgba(34, 193, 195, 1) 100%
  );
  font-family: arial, sans-serif;
  font-size: 16px;
}

h1 {
  margin-bottom: 1rem;
}

.container {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  margin: 0 auto;
}

.scrollable {
  display: flex;

  height: 200px;

  margin-left: calc(var(--scrollable-fade-out) * -1);
  margin-right: calc(var(--scrollable-fade-out) * -1);
  padding-left: var(--scrollable-fade-out);
  padding-right: var(--scrollable-fade-out);

  overflow-x: scroll;

  mask: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) calc(0% + var(--scrollable-fade-out)),
    rgba(0, 0, 0, 1) calc(100% - var(--scrollable-fade-out)),
    rgba(0, 0, 0, 0) 100%
  );
  mask-composite: subtract;
}

.scrollable--inner {
  display: flex;
  flex-direction: row;
}

.scrollable--item {
  height: 100%;
  min-width: 200px;
  margin: 0 5px;
  background-color: rgba(0, 0, 0, 0.3);
}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<link rel="stylesheet" href="styles.css" />
	</head>
	<body>
	<div class="container">
	<h1>Games</h1>
	<div class="scrollable">
	<div class="scrollable--inner">
	<div class="scrollable--item">This is an item</div>
	<div class="scrollable--item">This is an item</div>
	<div class="scrollable--item">This is an item</div>
	<div class="scrollable--item">This is an item</div>
	<div class="scrollable--item">This is an item</div>
	<div class="scrollable--item">This is an item</div>
	<div class="scrollable--item">This is an item</div>
	<div class="scrollable--item">This is an item</div>
	<div class="scrollable--item">This is an item</div>
	<div class="scrollable--item">This is an item</div>
	</div>
	</div>
	</div>
	</body>
	</html>
	:root {
	--scrollable-fade-out: 100px;
	}

	* {
	margin: 0;
	padding: 0;
	}

	body,
	html {
	min-height: 100%;
	overflow-x: hidden;
	}

	body {
	padding: 2rem 0;
	color: #fff;
	background: rgb(34, 193, 195);
	background: linear-gradient(
	0deg,
	rgba(253, 187, 45, 1) 0%,
	rgba(34, 193, 195, 1) 100%
	);
	font-family: arial, sans-serif;
	font-size: 16px;
	}

	h1 {
	margin-bottom: 1rem;
	}

	.container {
	display: flex;
	flex-direction: column;
	max-width: 800px;
	margin: 0 auto;
	}

	.scrollable {
	display: flex;

	height: 200px;

	margin-left: calc(var(--scrollable-fade-out) * -1);
	margin-right: calc(var(--scrollable-fade-out) * -1);
	padding-left: var(--scrollable-fade-out);
	padding-right: var(--scrollable-fade-out);

	overflow-x: scroll;

	mask: linear-gradient(
	90deg,
	rgba(0, 0, 0, 0) 0%,
	rgba(0, 0, 0, 1) calc(0% + var(--scrollable-fade-out)),
	rgba(0, 0, 0, 1) calc(100% - var(--scrollable-fade-out)),
	rgba(0, 0, 0, 0) 100%
	);
	mask-composite: subtract;
	}

	.scrollable--inner {
	display: flex;
	flex-direction: row;
	}

	.scrollable--item {
	height: 100%;
	min-width: 200px;
	margin: 0 5px;
	background-color: rgba(0, 0, 0, 0.3);
	}