Home/Explore/

Watermark

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
Draft
<div style="
    /* Used to position the watermark */
    position: relative;
">
    <!-- Watermark container -->
    <div style="
        /* Center the content */
        align-items: center;
        display: flex;
        justify-content: center;

        /* Absolute position */
        left: 0px;
        position: absolute;
        top: 0px;

        /* Take full size */
        height: 100%;
        width: 100%;
    ">
        <!-- The watermark -->
        <div style="
            /* Text color */
            color: rgba(0, 0, 0, 0.2);

            /* Text styles */
            font-size: 3rem;
            font-weight: bold;
            text-transform: uppercase;

            /* Rotate the text */
            transform: rotate(-45deg);

            /* Disable the selection */
            user-select: none;
        ">
            Draft
        </div>
    </div>

    <!-- Other content -->
    ...
</div>
Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!