url()
The url() function references an external resource such as an image, font, or SVG fragment.
Syntax
url(<path>)Examples
.bg { background-image: url('/images/hero.webp'); }
@font-face {
font-family: 'Inter';
src: url('/fonts/inter.woff2') format('woff2');
}
.icon { clip-path: url('#mask'); }
Output
Loads a background image, registers a web font, and references an in-document SVG clip path.
Notes
Paths are resolved relative to the stylesheet, not the HTML document. Quotes are optional but recommended. Supports data: URIs and same-document fragment references like url(#id).
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 1.0 |
| edge | 12 |