Dot Overlay

Full-screen dot-grid background overlay

overlaybackgrounddotspatterndecorative

By Kaiborg · Verified author

D/01//Description

A lightweight full-screen dot-grid overlay for Framer. Control dot color, size, spacing, offset, opacity, backdrop blur, blend mode, and z-index. Drop it on the top layer of any page for a clean dotted texture. (The Dot & Image Overlay adds custom-image tiling.)

P/02//Source preview · locked

import { addPropertyControls, ControlType } from "framer"

export default function DotOverlay(props) {
    const getBackgroundImage = () => {
        return `radial-gradient(circle, ${props.color} ${props.dotSize}px, transparent ${props.dotSize}px)`
    }

// … purchase to unlock the full source

Source locked

R/03//Related · same category

OVERRIDEFolded Corner

Folded Corner

Free

Fold any corner of a frame with a clip-path cut

clip-pathcornerfold

By Kaiborg

Dot & Image Overlay

$8

Full-screen dot-grid or tiled-image background overlay

overlaybackgroundpattern

By Kaiborg