CSS Текстура "Карбон"

Фоновая текстура в стиле "карбон" с помощью градиентов CSS

by Kocsten

HTML

<h1>ZORNET.RU</h1>
<hr>

CSS

@import 'https://fonts.googleapis.com/css?family=Orbitron:400,900';
*,
::after,
::before {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  border: 0;
}

body {
    background: -webkit-linear-gradient(45deg, #292929 25%, transparent 25%, transparent 75%, #292929 75%), -webkit-linear-gradient(45deg, #292929 25%, transparent 25%, transparent 75%, #292929 75%) 0.1875em 0.1875em, -webkit-radial-gradient(at 50% 0, #484847, #090909);
    background: linear-gradient(45deg, #2b2a2a 25%, #10101000 25%, transparent 75%, #212020 75%), linear-gradient(45deg, #252424 25%, transparent 25%, transparent 75%, #272626 75%) 0.1875em 0.1875em, radial-gradient(at 50% 0, #4a4a48, #131212);
    background-size: 0.375em 0.375em, 0.375em 0.375em, 100% 100%;
}

h1 {
    color: rgba(10, 10, 10, 0.36);
    font-size: 5em;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 9px;
    text-shadow: rgba(247, 237, 237, 0.05) 2px 2px 2px;
}
hr {
    height: 1px;
    width: 90%;
    border: 0;
    box-shadow: rgba(251, 243, 243, 0.05) 3px 2px 3px;
    background-image: -webkit-linear-gradient(left, rgba(12, 12, 12, 0), rgba(14, 14, 14, 0.45), rgba(16, 15, 15, 0));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
    background-image: linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
}