CSS Background Image Generator

Generate paste-ready background-image CSS for linear gradients, radial gradients, and image URL layers with optional overlay color.

Last updated: August 2026 | By Workshelve Team

Angle

Start HEX

Start %

End HEX

End %

CSS Output

Generated background-image CSS will appear here.

Preview

What background-image Does

The CSS background-image property paints one or more image layers behind an element. Those layers can be external image files, generated gradients, or a stack that combines both.

This generator focuses on practical background-image output: linear gradients, radial gradients, and URL backgrounds with a color overlay layer. It also includes the related size, position, and repeat declarations needed to make the preview match normal implementation.

It is intentionally one-way. Arbitrary background-image CSS can contain multiple layers, data URLs, escaped strings, CSS variables, image-set(), cross-fades, and browser-specific syntax, so reverse parsing would be incomplete and easy to misread.

How the CSS Is Built

1. Numeric angle, stop, position, and opacity values are parsed with parseFloat and validated before CSS is emitted.

2. Linear angles are normalized onto 0-360 degrees, so -45deg becomes 315deg.

3. Radial center positions are constrained to 0–100% by this UI. Gradient color-stop percentages may be below 0% or above 100%, which CSS permits.

4. URL mode stacks a linear-gradient overlay before the image URL when overlay opacity is greater than zero.

135deg, #0F172A to #0EA5E9

linear-gradient(135deg, #0F172A 0%, #0EA5E9 100%)

-45deg, #111827 to #F97316

linear-gradient(315deg, #111827 0%, #F97316 100%)

circle at 35% 30%

radial-gradient(circle at 35% 30%, ...)

URL with 0.42 overlay

linear-gradient(...), url("/images/product-hero.jpg")

Worked Example: Image With Readability Overlay

Build a hero background from /images/product-hero.jpg with a dark overlay:

Layers

The overlay gradient is listed first, so it paints above the photo while still belonging to background-image.

CSS

background-image: linear-gradient(rgba(2, 6, 23, 0.42), rgba(2, 6, 23, 0.42)), url("/images/product-hero.jpg");

Result

The image remains visible, but text placed over it has a steadier backdrop because the overlay reduces bright and high-contrast areas.

CSS Background Image FAQ

Why is this tool not bidirectional?

background-image accepts too many valid forms to parse safely: layered URLs, gradients, CSS variables, data URLs, image-set(), and more. Generating clean CSS is reliable; reverse parsing arbitrary CSS would be partial.

Is a CSS gradient really a background image?

Yes. CSS gradients are generated images, so they belong in background-image rather than background-color.

Which numeric values can be negative?

Linear gradient angles and gradient color-stop percentages can be negative. This UI constrains radial center positions to 0–100%, and overlay opacity must stay from 0 to 1.

Why does URL mode output multiple background-image layers?

A readable overlay is created as a solid linear-gradient layer above the URL layer. In CSS, the first background layer is painted closest to the viewer.

Can I use a relative image path?

Yes. The URL field accepts relative paths such as /images/hero.jpg and absolute URLs such as https://example.com/hero.jpg.

Does background-size apply to every layer?

In this generated CSS, one background-size value is applied to all layers. That is usually correct for a simple overlay plus image stack.

Can this generate background shorthand?

No. It keeps background-image, background-size, background-position, and background-repeat separate so the output does not accidentally reset unrelated background properties.

Why are HEX colors limited to six digits?

The generator uses separate opacity controls where transparency matters. Six-digit HEX keeps color and alpha decisions explicit.

Build and preview common CSS Grid layout patterns.

CSS Gradient Generator – Linear & Radial Gradients

Build linear and radial gradients with custom color stops.

Image Metadata Editor – Remove & Edit Image Metadata

Remove, replace, and export image metadata.

CSS Background Color Generator

Generate and inspect solid background-color declarations.

CSS Border Generator

Generate uniform or side-specific CSS border declarations.

CSS Border Radius Generator

Generate uniform, corner, and elliptical border-radius CSS.

Browse all Design Tools Tools →