Chromatic Abberation

Adjustable chromatic abberation.

levels determines the level of detail.

spread determines the intensity of the effect.

Shader code
shader_type canvas_item;

uniform int levels = 3;
uniform float spread = 0.01;

vec3 chromatic_slice(float t){
	vec3 res = vec3(1.0-t, 1.0 - abs(t - 1.0), t - 1.0);
	return max(res, 0.0);

void fragment(){
	vec3 sum;
	COLOR.rgb = vec3(0);
	vec2 offset = (UV - vec2(0.5))*vec2(1,-1);
	for(int i = 0; i < levels; i++){
		float t = 2.0*float(i)/float(levels-1); // range 0.0->2.0
		vec3 slice = vec3(1.0-t, 1.0 - abs(t - 1.0), t - 1.0);
		slice = max(slice, 0.0);
		sum += slice;
		vec2 slice_offset = (t-1.0)*spread*offset;
		COLOR.rgb += slice * texture(SCREEN_TEXTURE, SCREEN_UV + slice_offset).rgb;
	COLOR.rgb /= sum;
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

More from Hayden

2D Motion Blur

2D Rotational Motion Blur

Related shaders

Chromatic Abberation (With Offset)

Just Chromatic Aberration

Double Vision w/ chromatic aberration

Notify of

Newest Most Voted
Inline Feedbacks
View all comments
1 year ago

This shader is radial unlike the other chromatic abberation shader in the website:

Has quite smooth results. But Level parameter is confusing, and the result has an unwanted green tint. For those willing to get rid of it, set the parameter to high values. But that would be inperformant.

1 year ago
Reply to  Hayden

No, I meant the radialness gives better results compared to linear.

1 year ago

Wonderful shader! Thanks for sharing mate, great work. It seems pretty versatile, will try use it for getting hit effect and maybe some isometric depth of field. 🙂