The custom CSS panel can be used to add additional properties to your elements such as gradients, individual border radius and local fonts.
CSS needs to be applied to individual elements, and is not supported on groups.
We recommend declaring properties individually, rather than using a generic property. For example,
font-family instead of
Custom CSS tips
Note that the following Custom CSS tips are not officially support by Atomic – use them with care. Unexpected results may occur.
The following CSS can be used to create a gradient fill on a shape:
background: linear-gradient(red, blue);
- Open a Custom CSS Gradient Generator such as CSS Matic or Grabient. Choose your preferred colors, angle and opacity. In the CSSmatic example, there’s quite a few settings you can play around with. Just tweak it until it feels right.
- Once you’ve chosen your settings, select ‘Copy Text’ and navigate back to Atomic. With your element selected, paste the CSS into the Custom CSS field in the Atomic.
Convert square images to circular
This could be useful if you're wanting to create circular avatars, for example. To do this:
- Import your image into Atomic
- With the image selected, navigate to the Custom CSS window and paste in the following:
Edit border radius of specific corners
You may only want a border radius to apply on one, two or three of your corners. To do this, copy and paste what you need from the CSS below. The 'px' value can be adjusted to reflect the radius you'd like.
Some extra resources
Adding custom masking shapes via Custom CSS: http://bennettfeely.com/clippy/
Using blend modes via Custom CSS: https://css-tricks.com/basics-css-blend-modes/
Adding background patterns via Custom CSS: http://lea.verou.me/css3patterns/
Corner customization via Custom CSS: http://leaverou.github.io/corner-shape/
Gradients via Custom CSS: http://angrytools.com/gradient/
Recommended Reading: Four tips to prototype quickly in Atomic
Next → Exporting