Como hacer un overlay con degradado de abajo hacia arriba usando css y tailwind
Tags: css, tailwindcss, frontend, spanish
Published: 2022-10-27 03:29:45

Para este ejemplo estaré usando imágenes del api de [lorem picsum](https://picsum.photos/) y la etiqueta \<picture>, para la nomenclatura clases en css usare BEM y las utilidades [Tailwind](https://tailwindcss.com/docs/installation)

[Demo en codi.link](https://codi.link/PHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+Cgo8ZGl2IGNsYXNzPSJ3LXNjcmVlbiBoLXNjcmVlbiBmbGV4IGZsZXgtd3JhcCBmbGV4LXJvdyBnYXAtMTAganVzdGlmeS1jZW50ZXIgaXRlbXMtY2VudGVyIj4KICA8IS0tIG92ZXJsYXkgZW4gdGFpbHdpbmQgLS0+CiAgPHBpY3R1cmUKICAgIGNsYXNzPSJsZzp3LTgwIG1kOnctNDggdy00MCBsZzpoLTk2IG1kOmgtNjQgaC00OCByZWxhdGl2ZSBiZWZvcmU6bGc6dy04MCBiZWZvcmU6bWQ6dy00OCBiZWZvcmU6dy00MCBiZWZvcmU6bGc6aC05NiBiZWZvcmU6bWQ6aC02NCBiZWZvcmU6aC00OCBiZWZvcmU6YWJzb2x1dGUgYmVmb3JlOmJnLWdyYWRpZW50LXRvLXQgYmVmb3JlOmZyb20tc2xhdGUtODAwIj4KICAgIDxpbWcgY2xhc3M9ImxnOnctODAgbWQ6dy00OCB3LTQwIGxnOmgtOTYgbWQ6aC02NCBoLTQ4IG9iamVjdC1jb3ZlciIgc3JjPSJodHRwczovL3BpY3N1bS5waG90b3MvaWQvMjM3LzMwMC80MDAiIGFsdD0icGVycm8iPgogICAgPGgxIGNsYXNzPSJhYnNvbHV0ZSBsZzpib3R0b20tNCBtZDpib3R0b20tMyBib3R0b20tMiBsZzpsZWZ0LTMgbWQ6bGVmdC0yIGxlZnQtMSB0ZXh0LTJ4bCB0ZXh0LWdyYXktMzAwIj5UYWlsd2luZDwvaDM+CiAgPC9waWN0dXJlPgoKICA8IS0tIG92ZXJsYXkgZW4gY3NzIC0tPgogIDxwaWN0dXJlIGNsYXNzPSJvdmVybGF5Ij4KICAgIDxpbWcgY2xhc3M9Im92ZXJsYXktLWltYWdlIiBzcmM9Imh0dHBzOi8vcGljc3VtLnBob3Rvcy9pZC8yMzgvMzAwLzQwMCIgYWx0PSJwZXJybyI+CiAgICA8aDEgY2xhc3M9Im92ZXJsYXktLXRleHQiPkNzczwvaDE+CiAgPC9waWN0dXJlPgo8L2Rpdj4=%7COnJvb3QgewogIC0tb3ZlcmxheS13aWR0aDogMTUwcHg7CiAgLS1vdmVybGF5LWhlaWdodDogMjAwcHg7CiAgLS1vdmVybGF5LXdpZHRoX21kOiAyNTBweDsKICAtLW92ZXJsYXktaGVpZ2h0X21kOiAzNTBweDsKICAtLW92ZXJsYXktd2lkdGhfbGc6IDMwMHB4OwogIC0tb3ZlcmxheS1oZWlnaHRfbGc6IDQwMHB4Owp9Cgoub3ZlcmxheSB7CiAgd2lkdGg6IHZhcigtLW92ZXJsYXktd2lkdGgpOwogIGhlaWdodDogdmFyKC0tb3ZlcmxheS1oZWlnaHQpOwogIHBvc2l0aW9uOiByZWxhdGl2ZTsKfQoKLm92ZXJsYXk6OmJlZm9yZSB7CiAgY29udGVudDogJyc7CiAgd2lkdGg6IHZhcigtLW92ZXJsYXktd2lkdGgpOwogIGhlaWdodDogdmFyKC0tb3ZlcmxheS1oZWlnaHQpOwogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQodG8gdG9wLCAjMWUyOTNiLCAjZmZmZmZmMDApOwp9Cgoub3ZlcmxheS0taW1hZ2UgewogIHdpZHRoOiB2YXIoLS1vdmVybGF5LXdpZHRoKTsKICBoZWlnaHQ6IHZhcigtLW92ZXJsYXktaGVpZ2h0KTsKfQoKLm92ZXJsYXktLXRleHQgewogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICBjb2xvcjogI2QxZDVkYjsKICBmb250LXNpemU6IDEuNXJlbTsgLyogMjRweCAqLwogIGxpbmUtaGVpZ2h0OiAycmVtOyAvKiAzMnB4ICovCiAgbGVmdDogMC43NXJlbTsgLyogMTJweCAqLwogIGJvdHRvbTogMXJlbTsgLyogMTZweCAqLwp9CgpAbWVkaWEgKG1pbi13aWR0aDogNzY4cHgpIHsgCiAgLm92ZXJsYXkgewogICAgd2lkdGg6IHZhcigtLW92ZXJsYXktd2lkdGhfbWQpOwogICAgaGVpZ2h0OiB2YXIoLS1vdmVybGF5LWhlaWdodF9tZCk7CiAgfQoKICAub3ZlcmxheTo6YmVmb3JlIHsKICAgIHdpZHRoOiB2YXIoLS1vdmVybGF5LXdpZHRoX21kKTsKICAgIGhlaWdodDogdmFyKC0tb3ZlcmxheS1oZWlnaHRfbWQpOwogIH0KCiAgLm92ZXJsYXktLWltYWdlIHsKICAgIHdpZHRoOiB2YXIoLS1vdmVybGF5LXdpZHRoX21kKTsKICAgIGhlaWdodDogdmFyKC0tb3ZlcmxheS1oZWlnaHRfbWQpOwogIH0KfQoKQG1lZGlhIChtaW4td2lkdGg6IDEwMjRweCkgeyAKICAub3ZlcmxheSB7CiAgICB3aWR0aDogdmFyKC0tb3ZlcmxheS13aWR0aF9sZyk7CiAgICBoZWlnaHQ6IHZhcigtLW92ZXJsYXktaGVpZ2h0X2xnKTsKICB9CgogIC5vdmVybGF5OjpiZWZvcmUgewogICAgd2lkdGg6IHZhcigtLW92ZXJsYXktd2lkdGhfbGcpOwogICAgaGVpZ2h0OiB2YXIoLS1vdmVybGF5LWhlaWdodF9sZyk7CiAgfQoKICAub3ZlcmxheS0taW1hZ2UgewogICAgd2lkdGg6IHZhcigtLW92ZXJsYXktd2lkdGhfbGcpOwogICAgaGVpZ2h0OiB2YXIoLS1vdmVybGF5LWhlaWdodF9sZyk7CiAgfQp9CgoKCgoKCgoKCgoKCgoKCgoKCg==%7C)

## Css

### 1️⃣ HTML

``` html
<picture class="overlay">
	<img class="overlay__image" src="https://picsum.photos/id/238/300/400" alt="perro">
	<h1 class="overlay__text">Css</h1>
</picture>
```

### 2️⃣ CSS

#### Variables css

``` css
:root {
	--overlay-width: 150px;
	--overlay-height: 200px;
}
```

#### Clase overlay

``` css
.overlay {
	width: var(--overlay-width);
	height: var(--overlay-height);
	position: relative;
}

.overlay::before {
	content: '';
	width: var(--overlay-width);
	height: var(--overlay-height);
	position: absolute;
	background: linear-gradient(to top, #1e293b, #ffffff00);
}
```

#### Clase overlay__image

``` css
.overlay__image {
	width: var(--overlay-width);
	height: var(--overlay-height);
}
```

#### Clase overlay__text
```css
.overlay__text {
	position: absolute;
	color: #d1d5db;
	font-size: 1.5rem; /* 24px */
	line-height: 2rem; /* 32px */
	left: 0.75rem; /* 12px */
	bottom: 1rem; /* 16px */
}
```

### 3️⃣ Resultado

![Resultado de overlay con css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zkiy9hhubp30mrcpsp4b.png)

## Tailwind

### 1️⃣ HTML

``` html
<picture class="w-80 h-96 relative before:w-80 before:h-96 before:absolute before:bg-gradient-to-t before:from-slate-800">
	<img class="w-80 h-96 object-cover" src="https://picsum.photos/id/237/300/400" alt="cuidad">
	<h1 class="absolute bottom-4 left-3 text-2xl text-gray-300">Tailwind</h3>
</picture>
```

### 2️⃣ Resultado

![Resultado de overlay con tailwind](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzjhz29vspna4nze1hkl.png)