Gradient Fun

HTML
<h1>Gradient Fun</h1>
CSS
html, body { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } h1 { text-transform: uppercase; font-family: 'Oswald', sans-serif; font-size: 95px; color: #fff; } body { background: linear-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px) 0 -1px, linear-gradient(90deg, rgba(255, 255, 255, 0.1) 2px, transparent 2px) -1px 0; background-color: transparent; background-size: 10px 10px, 10px 10px, 5px 5px, 5px 5px; } html { background-size: cover; background-position: center; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMSAxIDYgNCI+ICA8aW1hZ2UgZmlsdGVyPSJ1cmwoI2IpIiB3aWR0aD0iOCIgaGVpZ2h0PSI2IiB4bGluazpocmVmPSJkYXRhOmltYWdlL2pwZWc7YmFzZTY0LC85ai80QUFRU2taSlJnQUJBUUFBQVFBQkFBRC8yd0JEQUFJQkFRRUJBUUlCQVFFQ0FnSUNBZ1FEQWdJQ0FnVUVCQU1FQmdVR0JnWUZCZ1lHQndrSUJnY0pCd1lHQ0FzSUNRb0tDZ29LQmdnTERBc0tEQWtLQ2dyLzJ3QkRBUUlDQWdJQ0FnVURBd1VLQndZSENnb0tDZ29LQ2dvS0Nnb0tDZ29LQ2dvS0Nnb0tDZ29LQ2dvS0Nnb0tDZ29LQ2dvS0Nnb0tDZ29LQ2dvS0Nnb0tDZ3Ivd2dBUkNBQUdBQWdEQVJFQUFoRUJBeEVCLzhRQUZBQUJBQUFBQUFBQUFBQUFBQUFBQUFBQUNQL0VBQlVCQVFFQUFBQUFBQUFBQUFBQUFBQUFBQVFILzlvQURBTUJBQUlRQXhBQUFBQmlEc3YveEFBZkVBQUJBd01GQUFBQUFBQUFBQUFBQUFBQ0FRTUZBQVFSQndrU0pHSC8yZ0FJQVFFQUFUOEFpZHBiUjZIWUdhdnBRSER0YlVpZjZLRTY1eEZWSExwTGt2Vld2Ly9FQUIwUkFBRUVBZ01BQUFBQUFBQUFBQUFBQUFFQ0F4RWhBQVVISWxILzJnQUlBUUlCQVQ4QWY1bzNicEtFcGlUWGFoN1F6Ly9FQUI4UkFBSUFCZ01CQUFBQUFBQUFBQUFBQUFFQ0JBVVJFeUV4QUFZeVFmL2FBQWdCQXdFQlB3QVEzUW9hWEdHV1VvelVwZFltNlJuMHcyMmQvZWYvMlE9PSIvPiAgPGZpbHRlciBpZD0iYiI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iLjUiIC8+PC9maWx0ZXI+PC9zdmc+); }
JAVASCRIPT
Expand for more options Login