diff --git a/src/ol/layer/Heatmap.js b/src/ol/layer/Heatmap.js
index 556d486cd9..fca3dae345 100644
--- a/src/ol/layer/Heatmap.js
+++ b/src/ol/layer/Heatmap.js
@@ -182,6 +182,7 @@ class Heatmap extends VectorLayer {
    */
   createRenderer() {
     return new WebGLPointsLayerRenderer(this, {
+      className: this.getClassName(),
       attributes: [
         {
           name: 'weight',
diff --git a/src/ol/layer/WebGLPoints.js b/src/ol/layer/WebGLPoints.js
index d8bb93f22c..68c6d42327 100644
--- a/src/ol/layer/WebGLPoints.js
+++ b/src/ol/layer/WebGLPoints.js
@@ -96,6 +96,7 @@ class WebGLPointsLayer extends Layer {
    */
   createRenderer() {
     return new WebGLPointsLayerRenderer(this, {
+      className: this.getClassName(),
       vertexShader: this.parseResult_.builder.getSymbolVertexShader(),
       fragmentShader: this.parseResult_.builder.getSymbolFragmentShader(),
       hitVertexShader:
diff --git a/src/ol/renderer/webgl/Layer.js b/src/ol/renderer/webgl/Layer.js
index 681b5be65d..2e18acffc4 100644
--- a/src/ol/renderer/webgl/Layer.js
+++ b/src/ol/renderer/webgl/Layer.js
@@ -37,6 +37,7 @@ export const WebGLWorkerMessageType = {
 
 /**
  * @typedef {Object} Options
+ * @property {string} [className='ol-layer'] A CSS class name to set to the canvas element.
  * @property {Object.<string,import("../../webgl/Helper").UniformValue>} [uniforms] Uniform definitions for the post process steps
  * @property {Array<PostProcessesOptions>} [postProcesses] Post-processes definitions
  */
@@ -65,6 +66,10 @@ class WebGLLayerRenderer extends LayerRenderer {
       postProcesses: options.postProcesses,
       uniforms: options.uniforms,
     });
+
+    if (options.className !== undefined) {
+      this.helper.getCanvas().className = options.className;
+    }
   }
 
   /**
diff --git a/src/ol/renderer/webgl/PointsLayer.js b/src/ol/renderer/webgl/PointsLayer.js
index 7a16d585d6..a506d8dd5b 100644
--- a/src/ol/renderer/webgl/PointsLayer.js
+++ b/src/ol/renderer/webgl/PointsLayer.js
@@ -44,6 +44,7 @@ import {listen, unlistenByKey} from '../../events.js';
 
 /**
  * @typedef {Object} Options
+ * @property {string} [className='ol-layer'] A CSS class name to set to the canvas element.
  * @property {Array<CustomAttribute>} [attributes] These attributes will be read from the features in the source and then
  * passed to the GPU. The `name` property of each attribute will serve as its identifier:
  *  * In the vertex shader as an `attribute` by prefixing it with `a_`
@@ -131,6 +132,7 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
     uniforms[DefaultUniform.PROJECTION_MATRIX] = projectionMatrixTransform;
 
     super(layer, {
+      className: options.className,
       uniforms: uniforms,
       postProcesses: options.postProcesses,
     });
diff --git a/test/spec/ol/layer/heatmap.test.js b/test/spec/ol/layer/heatmap.test.js
index 040d702441..6d5be12e70 100644
--- a/test/spec/ol/layer/heatmap.test.js
+++ b/test/spec/ol/layer/heatmap.test.js
@@ -11,6 +11,21 @@ describe('ol.layer.Heatmap', function () {
       const instance = new HeatmapLayer();
       expect(instance).to.be.an(HeatmapLayer);
     });
+    it('has a default className', function () {
+      const layer = new HeatmapLayer({
+        source: new VectorSource(),
+      });
+      const canvas = layer.getRenderer().helper.getCanvas();
+      expect(canvas.className).to.eql('ol-layer');
+    });
+    it('accepts a custom className', function () {
+      const layer = new HeatmapLayer({
+        source: new VectorSource(),
+        className: 'a-class-name',
+      });
+      const canvas = layer.getRenderer().helper.getCanvas();
+      expect(canvas.className).to.eql('a-class-name');
+    });
   });
 
   describe('hit detection', function () {