Outline, Shadow and Opacity
Front.Space's visual effects and enhancements offer an effortless way to transform the appearance of your images within your website or application. For instance, you can modify the shape of your images, blur and pixelate them, enhance quality, make color adjustments, introduce captivating effects for a unique look and feel, apply filters, and much more. You can even combine multiple effects on an image by sequentially applying each effect as a separate chained transformation. While some transformations utilize Basic syntax, others may require more detailed explanations. You can find examples of both types of transformations in the advanced syntax examples section. In addition to the showcased illustrations on this page, a plethora of additional effects are at your disposal. You can explore a comprehensive list of these effects, complete with examples, by referring to URL Transformation API. Below are some popular choices for leveraging effects and artistic enhancements.
![Adding Pink Color Effect on the Image Adding Pink Color Effect on the Image](https://cdn.front.space/demo-project/co_pink,e_colorize:40/demo-origin/sample5.jpg)
![Applying Green Border to the Image Applying Green Border to the Image](https://cdn.front.space/demo-project/w_300/co_SeaGreen,e_outline:15,f_png/demo-origin/sample2.jpg)
![Image with Shadow and Outline Image with Shadow and Outline](https://cdn.front.space/demo-project/ar_1.0,c_thumb,g_face,w_0.6,z_0.7/r_max/co_brown,e_outline/co_lightgray,e_shadow,x_25,y_35/demo-origin/sample4.jpg)
![Changing the opacity of an Image Changing the opacity of an Image](https://cdn-test.front.space/demo-project/o_30/demo-origin/sample8.jpg)
The outline effect (referred to as e_outline in URLs) provides you with the ability to add a polished outline to your transparent images. Additionally, you can pass further values to the parameter in the following manner:
Syntax: e_outline:[mode]:[width]:[blur]
You should consider the following parameters for applying the outline effect:
- Mode: The mode determines how to apply the outline effect. It can have one of the following values: inner, inner_fill, outer, fill. The default value is set to inner and outer.
- Width: The width parameter controls the thickness of the outline in pixels. The default value is set to 5 pixels, and the range of acceptable values is 1 to 100.
- Blur: The blur parameter adjusts the level of blur for the outline. The default value is set to 0, and the acceptable range is from 0 to 2000.
![Different Outline Modes Different Outline Modes](https://images.archbee.com/87vgnIIDFrD-P9E1Sm-9Z/K-0v4XABNiEtt4VCfMpXh_image.png?format=webp)
![Original Image Original Image](https://cdn.front.space/demo-project/demo-origin/iron_man.png)
![10px Outline Image 10px Outline Image](https://cdn.front.space/demo-project/e_outline:10/demo-origin/iron_man.png)
![10px Outline and 200 Blur 10px Outline and 200 Blur](https://cdn.front.space/demo-project/e_outline:10:200/demo-origin/iron_man.png)
![20px Outline and 1000 Blur 20px Outline and 1000 Blur](https://cdn.front.space/demo-project/e_outline:20:1000/demo-origin/iron_man.png)
To define a new color for the outline (the default is black), use the color parameter (co in URLs). The color can be specified as an RGB hex triplet (e.g., rgb:3e2222), a 3-digit RGB hex (e.g., rgb:777), or a named color (e.g., green). For instance, to add a gold or blue outline, follow these steps:
![Gold Background with 1000 Blur Gold Background with 1000 Blur](https://cdn.front.space/demo-project/e_outline:20:1000,co_gold/demo-origin/iron_man.png)
![LightBlue Outline without Blur LightBlue Outline without Blur](https://cdn.front.space/demo-project/e_outline:20,co_lightblue/demo-origin/iron_man.png)
Optional Qualifiers: co (color) | h (height) | w (width) | x, y (x & y coordinates)
With the help of Front.Space, your images can now have a solid border with the border parameter (bo in URLs) in a CSS-like format: width_style_color (e.g., 5px_solid_blue)
Syntax: bo_<width>_<style>_<color>
An opaque color can be set using different formats. One option is to use an RGB hex triplet, such as rgb:3e2222. Another option is to use a 3-digit RGB hex, like rgb:777. Alternatively, you can specify a named color, for example, gold.
In addition to these options, you can also use a 4-digit or 8-digit RGBA hex quadruplet to define the color. In this case, the 4th hex value represents the alpha value, which determines the opacity. For instance, using co_rgb:3e222240 would result in a color with 25% opacity.
Currently, only solid style is supported in borders.
For instance, the provided jpeg image labeled "sample4" has been delivered with a professional 50 pixel lightblue border.
![Original Image Original Image](https://cdn.front.space/demo-project/demo-origin/sample4.jpg)
![50px Border with LightBlue Color 50px Border with LightBlue Color](https://cdn.front.space/demo-project/bo_50px_solid_lightblue/demo-origin/sample4.jpg)
Borders are also a practical feature for incorporating overlays that help clearly define the overlaying image.
![Bordered Overlay Image Bordered Overlay Image](https://cdn.front.space/demo-project/l_demo-origin:sample2.jpg,fl_relative,w_0.23/bo_5px_solid_orange/fl_layer_apply,g_south_west,x_40,y_40/demo-origin/sample8.jpg)
Opacity is a key aspect when adjusting the appearance of an image. To achieve this, the opacity transformation (o in URLs) can be applied. By specifying a value ranging from 0 to 100, corresponding to the percentage of transparency, one can control the level of opacity. A value of 100 implies complete opacity, while a value of 0 represents complete transparency.
Syntax: o_<opacity level>
For instance, should you wish to deliver an image with 30% opacity, simply apply the appropriate transformation.
![Original Image Original Image](https://cdn.front.space/demo-project/demo-origin/sample2.jpg)
![Image with 30% Opacity Image with 30% Opacity](https://cdn.front.space/demo-project/o_30/demo-origin/sample2.jpg)
The e_shadow effect in URLs applies a shadow to the edge of the image. This effect can be used to create a subtle hovering effect for your image, making it appear slightly elevated from the page.
Syntax: e_shadow:<strength>
- strength Here it denotes the strength of the blur on the edges of the shadow. Range: 0 to 100. Default: 40.
To achieve this effect, you can add a dark green shadow with medium blurring of its edges (co_rgb:258C7A,e_shadow:50). Additionally, you can set the offset of the shadow to 60 pixels to the top right of the photo (x_60,y_-60).
![Image with Dark Green Shadow Image with Dark Green Shadow](https://cdn.front.space/demo-project/co_rgb:258C7A,e_shadow:50,x_60,y_-60/demo-origin/sample4.jpg)
Optional Qualifiers: co (color) | h (height) | w (width) | x, y (x & y coordinates)