Sobreposição de gradiente de contêiner somente CSS

Efeito de sobreposição de gradiente em qualquer contêiner sem o uso de imagens

.container {
  width: 100%;
  padding:100px 0;
  background-image: url("https://ununsplash.imgix.net/photo-1428279148693-1cf2163ed67d?fit=crop&fm=jpg&h=700&q=75&w=1050");
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  background-size:cover;
}

.container::before {
  background: rgba(0, 0, 0, 0) -webkit-linear-gradient(top left, rgba(57, 128, 128, 0.88) 0%, rgba(10, 71, 102, 0.88) 100%) repeat scroll 0 0;
  background: rgba(0, 0, 0, 0) -moz-linear-gradient(top left, rgba(57, 128, 128, 0.88) 0%, rgba(10, 71, 102, 0.88) 100%) repeat scroll 0 0;
  background: rgba(0, 0, 0, 0) -o-linear-gradient(top left, rgba(57, 128, 128, 0.88) 0%, rgba(10, 71, 102, 0.88) 100%) repeat scroll 0 0;
  background: rgba(0, 0, 0, 0) linear-gradient(to bottom right, rgba(57, 128, 128, 0.88) 0%, rgba(10, 71, 102, 0.88) 100%) repeat scroll 0 0;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}